<template lang="pug">
.documentation
  .text-center.todo(style="margin: 0 auto 7em;max-width: 900px")
    h2.title.todo To do...
    p.mb-4 Here is my ongoing to do list.

    div.mb-n5 Earlier
    div(style="transform: scale(0.85);opacity: 0.8")
      todo-list-item default active view
      todo-list-item Enable / disable views
      todo-list-item Hide / show weekends
      todo-list-item Add timeline w/ timerange &amp; increment
      todo-list-item Add timeline
      todo-list-item time format 12/24 h
      todo-list-item Support for i18n
      todo-list-item Split days
      todo-list-item Support events
      todo-list-item Background events
      todo-list-item Overlap events
      todo-list-item Keep only default style in CSS
      todo-list-item Allow custom arrows
      todo-list-item Default active date
      todo-list-item Double tap on touch devices
      todo-list-item 1st NPM Release!
      todo-list-item Built-in themes
      todo-list-item Resize events
      todo-list-item Delete events
      todo-list-item Emit DOM events
      todo-list-item Event indicator on month view
      todo-list-item Custom time format
      todo-list-item Highlight current time
      todo-list-item Show events on month view
      todo-list-item sync 2 vue-cal instances
      todo-list-item Add CSS transitions
      todo-list-item Multiple day events
      todo-list-item Custom events rendering
      todo-list-item Custom callback on event click
      todo-list-item Option to start week on Sunday
      todo-list-item All day events in top bar
      todo-list-item Custom cell rendering
      todo-list-item Events count on year(s) views
      todo-list-item Create new event
      todo-list-item min &amp; max dates
      todo-list-item Today button
      todo-list-item Externalize locales
      todo-list-item Support more simultaneous events
      todo-list-item Sticky day splits labels
      todo-list-item Hide particular weekdays
      todo-list-item Optional week number
      todo-list-item Date prototypes
      todo-list-item Business hours

    .mb-2 Current backlog
    todo-list-item Drag &amp; drop events
    todo-list-item Resize events snap to time
    todo-list-item Drag events snap to time
    todo-list-item Drop external events into Vue Cal
    todo-list-item(status="doing") Recurring events
    todo-list-item(status="todo") Drag &amp; drop multiple day events
    todo-list-item(status="todo") Drag &amp; drop events on touch devices
    todo-list-item(status="todo")
      a(href="https://github.com/antoniandre/vue-cal/issues/168" target="_blank" style="text-decoration: underline;color: inherit") Full Typescript support
    todo-list-item(status="todo")
      a(href="https://github.com/antoniandre/vue-cal/issues/127" target="_blank" style="text-decoration: underline;color: inherit") Full SSR support
    todo-list-item(status="todo") Improve multiple day events Month view
    todo-list-item(status="todo") Prevent event intersect. on drag/resize
    todo-list-item(status="todo") Horizontal timeline
    //- TODO:
      General
      - do all the @todo in the codebase
      - check overlaps only on the cell that has changed on event create/drag/background change
      Multiple-day events:
      - Fix event segments when dragging too fast on x axis.
      - multiple days on month view like google calendar
      - if more than 24 hour duration, consider as all-day

  h2.headline.mt-12.mb-8.title Github project &nbsp;&amp;&nbsp; important notes
  v-layout.mb-3(align-center)
    v-icon.pl-2.pr-1.mr-4.grey--text.text--lighten-1(x-large) fab fa-github
    a(href="https://github.com/antoniandre/vue-cal" target="_blank") github.com/antoniandre/vue-cal #[v-icon(small color="primary") open_in_new]

  v-layout.mt-8(align-center)
    v-icon.mr-4(size="50" color="amber lighten-2") info
    v-alert.ma-0(dense border="left" text color="yellow")
      div.black--text
        p.mb-2
          strong Important Notes: Always check the #[a(href="#release-notes") Release Notes] when you upgrade!
        strong Philosophy:&nbsp;
        | Vue Cal tries to separate logic &amp; styles.#[br]
        .body-2.
          For performance, simplified logic, readability, structure &amp; maintenance of your own code,
          what can be done via CSS should be done via CSS. CSS classes will help you style your events, cells, splits, etc.#[br]#[br]
          Vue Cal provides the minimum needed CSS styles, not the nicest one: that makes it highly customizable for all the scenarii
          and a breeze to override, you most likely don't need the #[code !important] flag.

  v-layout.my-8(align-center)
    v-icon.mr-4(size="50" color="pink lighten-3") favorite
    v-alert.ma-0(dense border="left" text color="pink")
      | If you like Vue Cal, you can
      a.pink--text.ml-2(href="https://www.paypal.me/antoniandre1" target="_blank" style="text-decoration: underline") #[strong Support the project]!
      div Thank you so much to all the supporters! #[span.headline.ml-1 🙏]

  h2.headline.mt-12.pt-12
    a(href="#installation") Installation
    a#installation(name="installation")
  strong.black--text Vue.js 2.6.7 or later is required.
  p.mt-2 You have 2 options: using NPM or #[span.code &lt;script&gt;] tag.
  h3.mt-8 Via NPM
  sshpre.mt-2(language="shell" label="Shell") npm i --S vue-cal
  p Then import the component and use it:
  sshpre.mt-2(language="js" label="Javascript").
    // In your Vue.js component.
    import VueCal from 'vue-cal'
    import 'vue-cal/dist/vuecal.css'
    ...

    export default {
      components: { VueCal },
      data: () => ({
        ...
      }),
      ...
    }

  h3 Via #[span.code &lt;script&gt;] tag
  p Include the Vue Cal script in your document #[span.code &lt;head&gt;] as follows:
  sshpre.mt-6(language="html" label="HTML").
    &lt;head&gt;
      ...
      &lt;script src="https://unpkg.com/vue"&gt;&lt;/script&gt;
      &lt;script src="https://unpkg.com/vue-cal"&gt;&lt;/script&gt;
      &lt;link href="https://unpkg.com/vue-cal/dist/vuecal.css" rel="stylesheet"&gt;
    &lt;/head&gt;
  p Then define the component to use in your template:
  sshpre.mt-6(language="js" label="Javascript").
    // In your Vue.js component.
    export default {
      components: { 'vue-cal': vuecal },
      ...
    }

  h2.headline.mt-12.pt-12
    a(href="#how-to-use") How to use
    a#how-to-use(name="how-to-use")
  highlight-message(type="warning")
    p.
      Wait! Before you dive in, make sure you place Vue Cal in a container that #[strong has a set height]! (not auto or initial)#[br]
      By default Vue Cal will take the full width &amp; height of its container if it has a set height.
    sshpre.mt-2(language="html-vue").
      &lt;!-- If the container has no height, set a height on vue-cal --&gt;
      &lt;vue-cal style="height: 250px" /&gt;
    vue-cal(small :time="false" hide-view-selector style="height: 250px")

  h2.headline.mt-12.pt-12
    a(href="#examples") Examples
    a#examples(name="examples")
  highlight-message.mt-3(type="success" no-icon)
    v-layout
      v-icon.ml-1.mr-3(color="green lighten-2") fab fa-codepen
      div
        .title Try it yourself on Codepen. Here is a set of frequent use cases:
        ul
          li #[a.ml-2(href="https://codepen.io/antoniandre/pen/pGJWjL" target="_blank") Basic calendar],
          li #[a.ml-2(href="https://codepen.io/antoniandre/pen/rPzWOJ" target="_blank") Calendar with events],
          li #[a.ml-2(href="https://codepen.io/antoniandre/pen/jJbygw?editors=1010" target="_blank") Calendar with custom events on month view],
          li #[a.ml-2(href="https://codepen.io/antoniandre/pen/abbVQLy?editors=1010" target="_blank") Calendar with custom title],
          li #[a.ml-2(href="https://codepen.io/antoniandre/pen/WWRLgG?editors=1010" target="_blank") Calendar with custom cells],
          li #[a.ml-2(href="https://codepen.io/antoniandre/pen/dxXvwv?editors=1010" target="_blank") Localized calendar (i18n)],
          li #[a.ml-2(href="https://codepen.io/antoniandre/pen/MWWbZgK" target="_blank") 2 Vue Cal instances to show 2 weeks],
          li #[a.ml-2(href="https://codepen.io/antoniandre/pen/jOOmxzo" target="_blank") 12 Vue Cal instances to show a full year view (slower - not recommended)],
          li #[a.ml-2(href="https://codepen.io/antoniandre/pen/rbpPab?editors=1010" target="_blank") How to fetch events from a back-end].

  h3.title
    a(href="#ex--basic")
      v-icon.mr-2 done
      | Basic
  //- Example.
  h4.title
    a(href="#ex--basic") # Basic with no timeline &amp; hidden weekends
    a#ex--basic(name="ex--basic")
  p
    | Double click cell to go to a narrower view and click the title to go to a broader view.#[br]
    | By default the calendar theme is grey to match with most of web pages.#[br]
    | You can easily change the color theme (#[a(href="#css-notes") learn how]): try this
    v-btn.ma-1(dark small :color="example1theme === 'green' ? 'rgba(66, 163, 185, 0.8)' : 'primary'" @click="example1theme = example1theme === 'green' ? 'blue' : 'green'") {{ example1theme === "green" ? 'blue theme' : 'green theme' }}
  v-card.my-2.ma-auto.main-content(style="height: 450px")
    vue-cal(:class="`vuecal--${example1theme}-theme`" :time="false" hide-weekends)
  sshpre(language="html-vue" label="Vue Template").
    &lt;vue-cal :time="false" hide-weekends /&gt;
  highlight-message For all the options details, refer to the #[a(href="#api") API] section.

  //- Example.
  h4.title
    a(href="#ex--small-cal") # Small calendar, no time, hidden view selector &amp; custom arrows
    a#ex--small-cal(name="ex--small-cal")
  p.
    Extra-small, no timeline, hidden view selector &amp; custom arrows (using the reserved slots #[span.code arrow-prev] &amp; #[span.code arrow-next]).#[br]
    With a hidden view selector, you can still navigate between the different views: double click cell to go to a narrower view, click title to go to a broader view.
  v-card.my-2.ma-auto.main-content(style="width: 250px;height: 260px")
    vue-cal.vuecal--green-theme(hide-view-selector :time="false" active-view="month" xsmall)
      template(v-slot:arrow-prev)
        v-icon arrow_back
      template(v-slot:arrow-next)
        v-icon arrow_forward
  sshpre(language="html-vue" label="Vue Template").
    &lt;vue-cal hide-view-selector :time="false" active-view="month" xsmall&gt;
      &lt;i v-slot:arrow-prev aria-hidden="true" class="v-icon material-icons"&gt;arrow_back&lt;/i&gt;
      &lt;i v-slot:arrow-next aria-hidden="true" class="v-icon material-icons"&gt;arrow_forward&lt;/i&gt;
    &lt;/vue-cal&gt;

  highlight-message For all the options details, refer to the #[a(href="#api") API] section.

  //- Example.
  h4.title
    a(href="#ex--disable-views") # Disable views, default view
    a#ex--disable-views(name="ex--disable-views")
  p.
    To hide views, you can use the #[span.code disable-views] option and provide an array of views
    to disable.#[br]
    The views are not only hidden from the menu bar, they are totally disabled,
    even when navigating from cells and title bar clicks.#[br]#[br]
    By default all the views are visible and the default active view is the #[span.code week] view.
  v-card.mx-auto.main-content(style="height: 350px")
    vue-cal.vuecal--green-theme.ex--disable-views(
      :time="false"
      active-view="month"
      :disable-views="['years', 'year', 'week']")
  sshpre(language="html-vue" label="Vue Template").
    &lt;vue-cal :time="false" active-view="month" :disable-views="['years', 'year', 'week']" /&gt;

  //- Example.
  h4.title
    a(href="#ex--min-max-dates") # Minimum / maximum dates &amp; single click to navigate
    a#ex--min-max-dates(name="ex--min-max-dates")
  p.
    With the options #[span.code minDate] &amp; #[span.code maxDate], you can set a
    time range of selectable cells. All the cells before and after are still visible but
    will be disabled and not selectable.#[br]
    You can still navigate through them with arrows.#[br]
    In this example, the minimum date is set to 10 days behind and the maximum date to
    10 days ahead.#[br]
  highlight-message(type="tips")
    strong.ml-2 Notes:
    ul
      li the min and max options accept a formatted string or plain Javascript Date object.
      li.
        2 different CSS class are available on out of range cells: #[span.code .before-min]
        &amp; #[span.code .after-max].
  v-card.my-2.ma-auto.main-content(style="width: 250px;height: 260px")
    vue-cal.vuecal--green-theme.ex--min-max-dates(
      xsmall
      hide-view-selector
      click-to-navigate
      :time="false"
      active-view="month"
      :min-date="minDate"
      :max-date="maxDate")
  sshpre(language="html-vue" label="Vue Template").
    &lt;vue-cal
      xsmall
      hide-view-selector
      click-to-navigate
      :time="false"
      active-view="month"
      :min-date="minDate"
      :max-date="maxDate"&gt;
    &lt;/vue-cal&gt;

  sshpre(language="js" label="Javascript").
    // Using Vue Cal Date Prototypes.
    computed: {
      minDate () {
        return new Date().subtractDays(10)
      },
      maxDate () {
        return new Date().addDays(10)
      }
    }

  sshpre(language="css" label="CSS").
    .vuecal__cell--disabled {text-decoration: line-through;}
    .vuecal__cell--before-min {color: #b6d6c7;}
    .vuecal__cell--after-max {color: #008b8b;}

  highlight-message For all the options details, refer to the #[a(href="#api") API] section.

  //- Example.
  h4.title
    a(href="#ex--calendar-themes") # Calendar themes - Rounded cells
    a#ex--calendar-themes(name="ex--calendar-themes")
  p.
    You can easily change the calendar color theme or use the rounded-cells theme
    by applying the corresponding CSS class on the #[span.code &lt;vuecal&gt;] tag.#[br]
    E.g. #[span.code vuecal--rounded-theme], #[span.code vuecal--green-theme], #[span.code vuecal--blue-theme].
    Read more about calendar themes in the #[a(href="#css-notes") CSS Notes] section.

  v-layout.ma-auto(justify-center wrap)
    v-card.ma-2.main-content(style="width: 270px;height: 300px")
      vue-cal.vuecal--rounded-theme.vuecal--blue-theme(
        xsmall
        hide-view-selector
        :time="false"
        active-view="month"
        :disable-views="['week']")
    v-card.ma-2.main-content(style="width: 270px;height: 300px")
      vue-cal.vuecal--rounded-theme.vuecal--green-theme(
        xsmall
        hide-view-selector
        :time="false"
        active-view="month"
        :disable-views="['week']")
  sshpre(language="html-vue" label="Vue Template").
    &lt;vue-cal class="vuecal--rounded-theme vuecal--green-theme"
             xsmall
             hide-view-selector
             :time="false"
             active-view="month"
             :disable-views="['week']"&gt;
    &lt;/vue-cal&gt;
  highlight-message Refer to the #[a(href="#api") API] section to read more about all the options.

  //- Example.
  h4.title
    a(href="#ex--hiding-particular-week-days") # Hide particular week days &amp; show the weeks numbers
    a#ex--hiding-particular-week-days(name="ex--hiding-particular-week-days")
  p.
    If you want to hide particular days of the week, you can use the #[span.code hide-weekdays]
    option.#[br]It accepts an array of days to hide (day numbers),
    #[strong starting at #[span.code 1] for Monday, to #[span.code 7] for Sunday].#[br]
    This option will apply on #[span.code month] &amp; #[span.code week] views.#[br]#[br]
    If you want to hide Saturday and Sunday you can put `#[span.code 6, 7]` in the array or use
    #[span.code hide-weekends] in supplement of #[span.code hide-weekdays].#[br]#[br]
    You can show the weeks numbers column on the #[span.code month] view with the #[span.code show-week-numbers] option.#[br]
    You can also provide a custom renderer to the weeks numbers cells through the #[span.code week-number-cell] slot.

  highlight-message.
    Refer to the #[a(href="#api") API] section to read more about all the options.#[br]

  v-card.mx-auto.main-content(style="height: 350px")
    vue-cal.vuecal--green-theme(
      :time="false"
      show-week-numbers
      :hide-weekdays="[2, 3, 5]"
      :disable-views="['years', 'year']")
  sshpre(language="html-vue" label="Vue Template").
    &lt;vue-cal :time="false"
             show-week-numbers
             :hide-weekdays="[2, 3, 5]"
             :disable-views="['years', 'year']"&gt;
    &lt;/vue-cal&gt;

  //- Example.
  h3.title
    a(href="#ex--internationalization")
      v-icon.mr-2 translate
      | Internationalization (i18n)
  v-layout(align-end wrap)
    h4.title.mt-6
      a(href="#ex--internationalization") # Internationalization
    v-spacer
    v-layout.shrink(align-center)
      v-icon.mr-2(color="primary") translate
      span.mr-2 Current language:
      v-select.pa-0.ma-0.shrink(
        :items="localesList"
        item-value="code"
        item-text="label"
        v-model="locale"
        hide-details single-line
        style="width: 250px")
        template(v-slot:selection="{ item }")
          span.mr-2 {{ item.label }}
          v-chip.code.ma-0(small color="#ddd") {{ item.code }}
  a#ex--internationalization(name="ex--internationalization")
  p.
    Let you translate the calendar texts into your own language (#[span.code locale]).#[br]
    Refer to the #[span.code locale] option in the #[a(href="#api") API] section to know more or if you want to provide a translation.#[br]
    Try it in Codepen: #[a(href="https://codepen.io/antoniandre/pen/dxXvwv" target="_blank") Vue Cal - Internationalization].
  v-card.my-2.ma-auto.main-content(style="width: 500px;height: 340px;max-width: 100%")
    vue-cal.vuecal--green-theme(
      :time="false"
      small
      active-view="year"
      :locale="locale"
      @ready="overrideDateTexts")
  sshpre(language="html-vue" label="Vue Template").
    &lt;v-select :items="localesList" v-model="locale"&gt;&lt;/v-select&gt;
    &lt;vue-cal hide-view-selector :time="false" small active-view="year" :locale="locale" /&gt;
  highlight-message(type="warning") Don't forget to import the locale file you want as follows:
  sshpre(language="js" label="Javascript" reactive).
    // In your Vue.js component import the locale file in your component:
    import VueCal from 'vue-cal'
    import 'vue-cal/dist/i18n/{{ locale }}.js'
    import 'vue-cal/dist/vuecal.css'

  h3.title
    a(href="#ex--timeline")
      v-icon.mr-2 access_time
      | Timeline, business hours &amp; Today

  //- Example.
  h4.title
    a(href="#ex--timeline") # Timeline
    a#ex--timeline(name="ex--timeline")
  p.
    Timelines are only visible on #[span.code week] and #[span.code day] view.#[br]
    This example has a set time range from 08:00 to 19:00, time step of 30 minutes (1 hour by default), 24-hour format, and hidden weekends.
  v-card.my-2.ma-auto.main-content(style="height: 450px")
    vue-cal.vuecal--green-theme(:time-from="8 * 60" :time-to="19 * 60" :time-step="30" hide-weekends)
  sshpre(language="html-vue" label="Vue Template").
    &lt;!-- Time-start time-end &amp; time-step are expected in minutes. --&gt;
    &lt;vue-cal :time-from="8 * 60" :time-to="19 * 60" :time-step="30" hide-weekends /&gt;
  highlight-message For all the options details, refer to the #[a(href="#api") API] section.

  //- Example.
  h4.title
    a(href="#ex--special-hours") # Special hours (or business hours)
    a#ex--special-hours(name="ex--special-hours")
  p.
    The special hours are visible on #[span.code week] and #[span.code day] views and allow
    you to highlight a particular time range on each day of the week individually.#[br]
  highlight-message.
    Refer to the #[a(href="#api") API] section to read more about the
    #[span.code special-hours] option.
  v-card.my-2.ma-auto.main-content(style="height: 450px")
    vue-cal.vuecal--green-theme.ex--special-hours(
      :time-from="8 * 60"
      :time-to="20 * 60"
      :disable-views="['years', 'year', 'month']"
      :special-hours="specialHours")
  sshpre(language="html-vue" label="Vue Template").
    &lt;vue-cal :time-from="8 * 60" :time-to="20 * 60" :special-hours="specialHours" /&gt;
  sshpre(language="js" label="JavaScript").
    // `from` and `to` are expected in minutes.
    const dailyHours = { from: 9 * 60, to: 18 * 60, class: 'business-hours' }

    // In your component's data, special hours from Monday to Friday.
    specialHours: {
      1: dailyHours,
      2: dailyHours,
      3: dailyHours,
      4: dailyHours,
      5: dailyHours
    }
  sshpre(language="css" label="CSS").
    .business-hours {
      background-color: rgba(255, 255, 0, 0.2);
      border: solid rgba(255, 210, 0, 0.6);
      border-width: 2px 0;
    }

  //- Example.
  h4.title
    a(href="#ex--today-current-time") # Today's current time
    a#ex--today-current-time(name="ex--today-current-time")
  p.mb-0.
    When you choose to show the time in vue-cal, the current time of today's date will
    be marked with a line (scroll to the current time to see it).#[br]
    The line position will be updated every time the calendar current view is re-rendered (by interacting).#[br]
    You can easily customize the now-line as you wish via CSS.
    Changing the line and arrow color is as easy as:#[br]
  sshpre.mt-6(language="css" label="CSS").
    .vuecal__now-line {color: #06c;}
  p.
    If you don't want this feature you can simply hide it: #[span.code .vuecal__now-line {display: none}].#[br]
    This feature has no impact on performance.

  p.
    If you want the now line to keep accurate position even while your calendar is iddle, you can use the option
    #[span.code watchRealTime] (see more in the #[a(href="#api") API] section).
  v-card.my-2.ma-auto.main-content(style="width: 360px;height: 360px;max-width: 100%")
    vue-cal.vuecal--green-theme.ex--today-current-time(
      xsmall
      :time-cell-height="26"
      active-view="day"
      :disable-views="['years', 'year', 'month']"
      @ready="scrollToCurrentTime('.ex--today-current-time')")
  sshpre(language="html-vue" label="Vue Template").
    &lt;vue-cal xsmall active-view="day" :disable-views="['years', 'year', 'month']" /&gt;

  //- Example.
  h4.title
    a(href="#ex--adding-a-today-button") # Adding a Today button
    a#ex--adding-a-today-button(name="ex--adding-a-today-button")
  p.
    By default the selected date is today. But if you get lost in time travel, you can add
    a Today button to select Today's date with the option #[span.code today-button].#[br]
    Like navigation arrows, there is also a slot to customize as you want.#[br]
    Bellow are the default Today button on the left and a custom one with icon and tooltip on the right.
  p.ex--adding-a-today-button
    | If you are not satisfied with the position of this button, you can also place it
    | outside of Vue Cal like so:
    v-btn.ma-1.today-button(small color="primary" outlined rounded @click="selectedDate = new Date()") Another Today Button
    | #[br]You might want to change view as well when going to Today's date, here is an example how:
    a.mx-1(href="https://codepen.io/antoniandre/pen/yrREOL?editors=1010" target="_blank") Today Button
    v-icon(small color="green lighten-2") fab fa-codepen
  v-layout(justify-center)
    v-card.my-2.mr-3.main-content(style="max-width: 280px;height: 250px")
      vue-cal.vuecal--green-theme.ex--adding-a-today-button(
        ref="vuecal2"
        xsmall
        hide-weekends
        :disable-views="['years']"
        :time="false"
        today-button
        active-view="month"
        :selected-date="selectedDate || new Date(new Date().getFullYear(), 11, 31)")
    v-card.my-2.main-content(style="max-width: 280px;height: 250px")
      vue-cal.vuecal--green-theme.ex--adding-a-today-button(
        ref="vuecal2"
        xsmall
        hide-weekends
        :disable-views="['years']"
        :time="false"
        today-button
        active-view="month"
        :selected-date="selectedDate || new Date(new Date().getFullYear(), 11, 31)")
        template(v-slot:today-button)
          v-tooltip(bottom)
            template(v-slot:activator="{ on }")
              v-btn(x-Programmatically small fab text v-on="on")
                v-icon(color="primary" size="20") my_location
            span Go to Today's date
  sshpre(language="html-vue" label="Vue Template").
    &lt;vue-cal ref="vuecal"
             xsmall
             hide-weekends
             :disable-views="['years']"
             :time="false"
             today-button
             active-view="month"
             :selected-date="selectedDate"&gt;
      &lt;!-- Optional slot for the custom button. --&gt;
      &lt;template v-slot:today-button&gt;
        &lt;!-- Using Vuetify --&gt;
        &lt;v-tooltip&gt;
          &lt;template v-slot:activator="{ on }"&gt;
            &lt;v-btn v-on="on"&gt;
              &lt;v-icon&gt;my_location&lt;/v-icon&gt;
            &lt;/v-btn&gt;
            &lt;span&gt;Go to Today's date&lt;/span&gt;
          &lt;/template&gt;
        &lt;/v-tooltip&gt;
      &lt;/template&gt;
    &lt;/vue-cal&gt;

    &lt;button @click="selectedDate = new Date()"&gt;ANOTHER TODAY BUTTON&lt;/button&gt;
  sshpre(language="js" label="Javascript").
    data: () => ({
      // Default to next new year eve.
      selectedDate: new Date(new Date().getFullYear(), 11, 31)
    })

  h3.title
    a(href="#ex--timeless-events")
      v-icon.mr-2 event
      | Events

  //- Example.
  h4.title
    a(href="#ex--timeless-events") # Timeless events
    a#ex--timeless-events(name="ex--timeless-events")
  p.
    The events have associated dates but no time information.#[br]
    Timeless events cannot be resized as they have no time or duration information.#[br]
    Refer to the #[span.code events] option in the #[a(href="#api") API] section.
  v-card.my-2.ma-auto.main-content(style="height: 350px")
    vue-cal.vuecal--green-theme(
      selected-date="2018-11-19"
      :time="false"
      :disable-views="['years', 'year', 'month']"
      hide-weekends
      :events="timelessEvents")
  sshpre(language="html-vue" label="Vue Template").
    &lt;vue-cal selected-date="2018-11-19"
             :time="false"
             :disable-views="['years', 'year', 'month']"
             hide-weekends
             :events="events"&gt;
    &lt;/vue-cal&gt;

  sshpre(language="js" label="Javascript").
    data: () => ({
      events: [
        {
          start: '2018-11-21',
          end: '2018-11-21',
          title: 'Need to go shopping',
          content: '&lt;i class="v-icon material-icons"&gt;shopping_cart&lt;/i&gt;',
          class: 'leisure'
        },
        {
          start: '2018-11-21',
          end: '2018-11-21',
          title: 'Golf with John',
          content: '&lt;i class="v-icon material-icons"&gt;golf_course&lt;/i&gt;',
          class: 'sport'
        },
        {
          start: '2018-11-22',
          end: '2018-11-22',
          title: 'Dad\'s birthday!',
          content: '&lt;i class="v-icon material-icons"&gt;cake&lt;/i&gt;',
          class: 'sport'
        }
      ]
  sshpre(language="css" label="CSS").
    /* Different color for different event types. */
    .vuecal__event.leisure {background-color: rgba(253, 156, 66, 0.9);border: 1px solid rgb(233, 136, 46);color: #fff;}
    .vuecal__event.sport {background-color: rgba(255, 102, 102, 0.9);border: 1px solid rgb(235, 82, 82);color: #fff;}

  //- Example.
  h4.title
    a(href="#ex--events-with-time") # Events with time information
    a#ex--events-with-time(name="ex--events-with-time")
  p.
    Read-only events (by default events are not editable) with custom HTML content and css class (for event types).#[br]
    Note that the events are always selectable (drop shadow and higher z-index), even when uneditable.
    The difference with timeless events is that a time is set in the #[span.code start] and #[span.code end] attributes of the events.

  v-card.my-2.ma-auto.main-content
    vue-cal.vuecal--green-theme(
      selected-date="2018-11-19"
      :time-from="9 * 60"
      :time-to="23 * 60"
      :disable-views="['years', 'year', 'month']"
      hide-weekends
      :events="events")
  sshpre(language="html-vue" label="Vue Template").
    &lt;vue-cal selected-date="2018-11-19"
             :time-from="9 * 60"
             :time-to="23 * 60"
             :disable-views="['years', 'year', 'month']"
             hide-weekends
             :events="events"&gt;
    &lt;/vue-cal&gt;
  sshpre(language="js" label="Javascript").
    events: [
    {
      start: '2018-11-16 10:30',
      end: '2018-11-16 11:30',
      // You can also define event dates with Javascript Date objects:
      // start: new Date(2018, 11 - 1, 16, 10, 30),
      // end: new Date(2018, 11 - 1, 16, 11, 30),
      title: 'Doctor appointment',
      content: '&lt;i class="v-icon material-icons"&gt;local_hospital&lt;/i&gt;',
      class: 'health'
    },
    ...

  //- Example.
  h4.title
    a(href="#ex--open-dialog-on-event-click") # Open a dialog box on event click / dblclick
    a#ex--open-dialog-on-event-click(name="ex--open-dialog-on-event-click")
  p.mb-2.
    By passing a function to the option #[span.code on-event-click] or #[span.code on-event-dblclick],
    you can control what happens when you click or double click an event - on any view where the events are displayed.#[br]
    The callback function you provide will receive 2 arguments:
  ul
    li #[span.code event]: the clicked calendar event's object
    li #[span.code e]: the associated javascript DOM event
  highlight-message.mt-3(type="tips") You can set any custom attribute you want on an event, you will then be able to access it in the dialog box!#[br]
  v-card.my-2.ma-auto.main-content(style="height: 520px")
    vue-cal.vuecal--green-theme.ex--open-dialog-on-event-click(
      selected-date="2018-11-19"
      :time-from="9 * 60"
      :time-to="19 * 60"
      :disable-views="['years', 'year']"
      hide-weekends
      :events="eventsToPop"
      :on-event-click="onEventClick")
  sshpre(language="html-vue" label="Vue Template").
    &lt;vue-cal selected-date="2018-11-19"
             :time-from="9 * 60"
             :time-to="19 * 60"
             :disable-views="['years', 'year']"
             hide-weekends
             :events="events"
             :on-event-click="onEventClick"&gt;
    &lt;/vue-cal&gt;

    &lt;!-- Using Vuetify --&gt;
    &lt;v-dialog v-model="showDialog"&gt;
      &lt;v-card&gt;
        &lt;v-card-title&gt;
          &lt;v-icon&gt;{{ '\{\{ selectedEvent.icon \}\}' }}&lt;/v-icon&gt;
          &lt;span&gt;{{ '\{\{ selectedEvent.title \}\}' }}&lt;/span&gt;
          &lt;v-spacer/&gt;
          &lt;strong&gt;{{ "\{\{ selectedEvent.start && selectedEvent.start.format('DD/MM/YYYY') \}\}" }}&lt;/strong&gt;
        &lt;/v-card-title&gt;
        &lt;v-card-text&gt;
          &lt;p v-html="selectedEvent.contentFull"/&gt;
          &lt;strong&gt;Event details:&lt;/strong&gt;
          &lt;ul&gt;
            &lt;li&gt;Event starts at: {{ '\{\{ selectedEvent.start && selectedEvent.start.formatTime() \}\}' }}&lt;/li&gt;
            &lt;li&gt;Event ends at: {{ '\{\{ selectedEvent.end && selectedEvent.end.formatTime() \}\}' }}&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/v-card-text&gt;
      &lt;/v-card&gt;
    &lt;/v-dialog&gt;

  sshpre(language="js" label="Javascript").
    data: () => ({
      selectedEvent: {},
      showDialog: false,
      events: [
        {
          start: '2018-11-20 14:00',
          end: '2018-11-20 18:00',
          title: 'Need to go shopping',
          icon: 'shopping_cart', // Custom attribute.
          content: 'Click to see my shopping list',
          contentFull: 'My shopping list is rather long:&lt;br&gt;&lt;ul&gt;&lt;li&gt;Avocados&lt;/li&gt;&lt;li&gt;Tomatoes&lt;/li&gt;&lt;li&gt;Potatoes&lt;/li&gt;&lt;li&gt;Mangoes&lt;/li&gt;&lt;/ul&gt;', // Custom attribute.
          class: 'leisure'
        },
        {
          start: '2018-11-22 10:00',
          end: '2018-11-22 15:00',
          title: 'Golf with John',
          icon: 'golf_course', // Custom attribute.
          content: 'Do I need to tell how many holes?',
          contentFull: 'Okay.&lt;br&gt;It will be a 18 hole golf course.', // Custom attribute.
          class: 'sport'
        }
      ]
    }),
    methods: {
      onEventClick (event, e) {
        this.selectedEvent = event
        this.showDialog = true

        // Prevent navigating to narrower view (default vue-cal behavior).
        e.stopPropagation()
      }
    }

  sshpre(language="css" label="CSS").
    .vuecal__event {cursor: pointer;}

    .vuecal__event-title {
      font-size: 1.2em;
      font-weight: bold;
      margin: 4px 0 8px;
    }

    .vuecal__event-time {
      display: inline-block;
      margin-bottom: 12px;
      padding-bottom: 12px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    }

    .vuecal__event-content {
      font-style: italic;
    }

  //- Example.
  h4.title
    a(href="#ex--events-indicators") # Events indicators - #[span.code years], #[span.code year] &amp; #[span.code month] views
    a#ex--events-indicators(name="ex--events-indicators")
  p.mb-0.
    When you define events the #[span.code month] view will display an events count per day.#[br]
    You can use the option #[span.code eventsCountOnYearView] to show the events count on
    #[span.code years] &amp; #[span.code year] views as well.#[br]
    You can customize the events count as you wish via CSS.
  p.mt-3.layout.align-center
    span.mr-2 Choose an indicator style:
    v-radio-group.ma-0.pt-0.d-inline-block(v-model="indicatorStyle" hide-details row)
      v-radio(label="count (default)" value="count" color="primary")
      v-radio(label="dash" value="dash" color="primary")
      v-radio(label="dot" value="dot" color="primary")
      v-radio(label="cell background" value="cell" color="primary")
  v-layout.ma-auto(justify-center wrap)
    v-card.ma-2.my-2.main-content(style="width: 300px;height: 360px")
      vue-cal.vuecal--green-theme(
        :class="'event-indicator--' + indicatorStyle"
        selected-date="2018-11-19"
        xsmall
        :time-from="10 * 60"
        active-view="month"
        :disable-views="['day']"
        events-count-on-year-view
        :events="events")
    v-card.ma-2.my-2.main-content(style="width: 300px;height: 360px")
      vue-cal.vuecal--yellow-theme(
        :class="'event-indicator--' + indicatorStyle"
        selected-date="2018-11-19"
        xsmall
        :time-from="10 * 60"
        :disable-views="['day']"
        events-count-on-year-view
        active-view="month"
        :events="events")
  sshpre(language="html-vue" label="Vue Template").
    &lt;vue-cal selected-date="2018-11-19"
             xsmall
             :time-from="10 * 60"
             :disable-views="['day']"
             events-count-on-year-view
             active-view="month"
             :events="events"&gt;
    &lt;/vue-cal&gt;

  sshpre(language="css" label="CSS").
    /* Default indicator is count, but you can override it with one of the following rules. */

    /* Dash indicator */
    .vuecal__cell-events-count {
      width: 18px;
      height: 2px;
      color: transparent;
    }

    /* Dot indicator */
    .vuecal__cell-events-count {
      width: 4px;
      min-width: 0;
      height: 4px;
      padding: 0;
      color: transparent;
    }

    /* Cell background indicator */
    .vuecal__cell--has-events {background-color: #fffacd;}
    .vuecal__cell-events-count {display: none;}

  //- Example.
  h4.title
    a(href="#ex--events-on-month-view") # Display events on month view
    a#ex--events-on-month-view(name="ex--events-on-month-view")
  p.
    With the option #[span.code events-on-month-view], you can choose whether to display the events on the month view or not.#[br]
    #[span.code events-on-month-view] accepts a Boolean to show or hide, or the string '#[span.code short]' to show only the event's title.#[br]
    If #[span.code events-on-month-view] is set to #[span.code true], all the informations are displayed, you can then hide
    any event information via CSS.#[br]
    If you want all the cells to have the same height on this view, this is also your call, you can do it via CSS.
  v-card.my-2.ma-auto.main-content
    vue-cal.vuecal--green-theme.vuecal--full-height-delete.ex--events-on-month-view(
      selected-date="2018-11-19"
      :time-from="9 * 60"
      :disable-views="['years', 'year']"
      active-view="month"
      hide-weekends
      events-on-month-view="short"
      :events="events"
      style="height: 600px")
  sshpre(language="html-vue" label="Vue Template").
    &lt;vue-cal selected-date="2018-11-19"
             :time-from="9 * 60"
             :disable-views="['years', 'year']"
             active-view="month"
             hide-weekends
             events-on-month-view="short"
             :events="events"
             style="height: 600px"&gt;
    &lt;/vue-cal&gt;
  sshpre(language="css" label="CSS").
    .vuecal--month-view .vuecal__cell {height: 80px;}

    .vuecal--month-view .vuecal__cell-content {
      justify-content: flex-start;
      height: 100%;
      align-items: flex-end;
    }

    .vuecal--month-view .vuecal__cell-date {padding: 4px;}
    .vuecal--month-view .vuecal__no-event {display: none;}

  //- Example.
  h4.title
    a(href="#ex--edit-delete-create-events") # Edit, delete &amp; create events
    a#ex--edit-delete-create-events(name="ex--edit-delete-create-events")
  p.mb-2
    | The #[span.code editable-events] option allows these actions all together:
  ul
    li Edit the event title
    li Resize an event by dragging the resizer handle. #[strong Not available if no timeline, not possible on background events.]
    li Drag &amp; drop an event (not from the editable title text selection and not from the resizer). #[strong Not possible on background events.]
    li Delete an event (by clicking and holding an event)
    li Create a new event (by clicking and holding a cell)
      .grey--text Event creation is only possible on a day cell, so not on years &amp; year views.#[br]
      div Learn more about event creation in the #[a(href="#ex--more-advanced-event-creation") more advanced event creation] example.
  p.mt-3
    | Vue Cal emits events on calendar event change, read more about it in the
    | #[a(href="#ex--emitted-events") emitted events] example.

  highlight-message(type="tips")
    ul
      li.
        You can override the #[span.code editable-events] ability in each events with the event
        attributes #[span.code titleEditable: false], #[span.code deletable: false],
        #[span.code draggable: false] &amp; #[span.code resizable: false].
      li.
        By default the delete button only appears at the top of the event with a set height (1.4em).
        If you want a full-height delete button like in this example, you can apply the CSS class
        #[span.code .vuecal--full-height-delete] to your &lt;vue-cal&gt; tag.

  v-card.my-2.ma-auto.main-content(style="height: 599px")
    vue-cal.vuecal--green-theme.vuecal--full-height-delete(
      selected-date="2018-11-19"
      :time-from="10 * 60"
      :time-to="23 * 60"
      :disable-views="['years', 'year']"
      hide-view-selector
      hide-weekends
      editable-events
      :events="editableEvents")
  sshpre(language="html-vue" label="Vue Template").
    &lt;vue-cal selected-date="2018-11-19"
             :time-from="10 * 60"
             :time-to="23 * 60"
             :disable-views="['years', 'year']"
             hide-view-selector
             hide-weekends
             editable-events
             :events="events"
             class="vuecal--full-height-delete"&gt;
    &lt;/vue-cal&gt;

  //- Example.
  h4.title
    a(href="#ex--drag-and-drop-in-details") # Event drag &amp; drop in details
    v-chip.ml-3.px-2(color="error" small outlined) Not available on touch devices for now
    a#ex--drag-and-drop-in-details(name="ex--drag-and-drop-in-details")
  p.mb-2.
    You probably tried the events drag &amp; drop in the previous example, but here's what
    you missed! Quite a few things!

  highlight-message
    ul
      li.
        Drag &amp; drop is a module (to keep Vue Cal light weight) and must be loaded
        separately: #[br]#[span.code import 'vue-cal/dist/drag-and-drop.js']
      li
        strong Drag &amp; drop is only available on single day events for now.
  h5 Dragging over header
  ul
    li.
      While you drag an event over the view selector buttons, or the previous and next arrows,
      or even the today button, they will get into a highlighted state and if you hold over for
      a few milliseconds they will change the view so you can drop the event you are holding
      on another date of the calendar.
    li.
      while dragged over, the previous and next buttons will keep changing the view until you go
      away from the button.
    li.
      Dragging an event over the today button will take you to Today's date, and if you're in
      a #[span.code years] or #[span.code year] view it will also go to the next available
      narrower view from #[span.code month] downward.
  h5 Dragging over a cell
  ul
    li.
      If you drag an event over a cell or a split
      (ref. #[a(href="#ex--splitting-days") splitting days]), the cell/split gets into a
      highlighted state, showing you where the event would go if you drop it.
    li.
      You can drop an event in any cell. But because it does not make much sense to drop it into a
      #[span.code years] or #[span.code year] view, if you hold over a cell
      in these views or in #[span.code month] view, it will go to the next available narrower
      view so you can at least see a day cell.
  h5 Dropping the event into a cell or somewhere not allowed
  ul
    li.
      If you drop the event outside of the calendar or anywhere it's not possible,
      it will snap back to its original place and the original view will be restored if it
      was changed by navigating away.
    li.
      If you drop the event in a cell and it would start before midnight (00:00), it is placed at
      midnight, keeping its duration.
    li.
      If you drop the event in a cell and it would end after midnight (24:00), its duration will
      be truncated to end at midnight (24:00).
    li.
      By default, when you drop the event it will start exactly where you dropped it,
      but if you prefer you can use the #[span.code snapToTime] option to dictate where it should
       snap to (refer to #[span.code snapToTime] in the #[a(href="#api") API section]).#[br]
      If you wonder why it does not represent the snapping while dragging, it's not possible to do it with
      the native HTML5 drag &amp; drop.
  h5 Emitted events
  ul
    li
      | When dropping an event into a cell, the
      a.ml-1(href="#ex--emitted-events") #[span.code event-drop] and #[span.code event-change] events are emitted.
  h5 CSS styles
  ul
    li
      | You can change the highlighted style of the header buttons or cells through these CSS classes:
      ul
        li #[span.code .vuecal__view-btn--highlighted]
        li #[span.code .vuecal__today-btn--highlighted]
        li #[span.code .vuecal__arrow--highlighted]
        li #[span.code .vuecal__cell--highlighted]
        li #[span.code .vuecal__cell-split--highlighted]
    li.
      You can change the style of the event being dragged through the
      #[span.code .vuecal__event--dragging] CSS class.
    li.
      While dragging, a copy of the original event is made and that's what you drag
      (native HTML5 drag &amp; drop behavior). The original event receive the
      #[span.code .vuecal__event--static] CSS class which hides it with #[span.code opacity: 0].#[br]
      You can use that class to give it a different style.

  v-card.my-2.ma-auto.main-content
    vue-cal.vuecal--green-theme.vuecal--full-height-delete(
      selected-date="2018-11-19"
      today-button
      :time-from="10 * 60"
      :time-to="23 * 60"
      hide-weekends
      :snap-to-time="15"
      editable-events
      :events="eventsToDrag"
      :split-days="[{ id: 1, label: 'Dr 1' }, { id: 2, label: 'Dr 2' }]")
  sshpre(language="html-vue" label="Vue Template").
    &lt;vue-cal selected-date="2018-11-19"
             today-button
             :time-from="10 * 60"
             :time-to="23 * 60"
             hide-weekends
             :snap-to-time="15"
             editable-events
             :events="events"
             :split-days="[{ id: 1, label: 'Dr 1' }, { id: 2, label: 'Dr 2' }]"
             class="vuecal--full-height-delete"&gt;
    &lt;/vue-cal&gt;
  sshpre(language="css" label="CSS").
    .vuecal__event--dragging {background-color: rgba(60, 60, 60, 0.3);}

  //- Example.
  h4.title
    a(href="#ex--external-events-drag-and-drop") # External events drag &amp; drop
    v-chip.ml-3.px-2(color="error" small outlined) Not available on touch devices for now
    a#ex--external-events-drag-and-drop(name="ex--external-events-drag-and-drop")
  p.mb-2.
    You can drag &amp; drop events from an external source as long as they are HTML5 draggable (this will change when touch devices are supported).#[br]
    It is also possible to move an event from one calendar to another.#[br]#[br]
    In the external event, you can set a #[span.code duration] property: it will be used to represent the duration of the event on Vue Cal when it has no date.#[br]
    If the #[span.code duration] is missing, the default will be 2 hours.

  highlight-message(type="tips")
    strong Important note when dragging external events into Vue Cal:
    div.
      With HTML5 drag &amp; drop, when you drop a DOM element to another location, you have to move
      the element yourself. Now especially because Vue is data driven and a DOM update does not
      modify the data, you will also have to remove the event from its original data source yourself
      - unless you want to create a copy.#[br]
      Learn how in the example source code bellow.
  v-layout.mt-4(wrap)
    div.mr-2
      .external-event(
        v-for="(item, i) in draggables"
        :key="i"
        draggable="true"
        @dragstart="onEventDragStart($event, item)")
          strong.mr-2 {{ item.title }}
          span ({{ item.duration ? `${item.duration} min` : 'no duration' }})
          div {{ item.content }}
    vue-cal.mr-1.flex.external-events-drag-and-drop.vuecal--blue-theme(
      small
      hide-view-selector
      hide-weekends
      :disable-views="['years', 'year', 'month', 'day']"
      :time-from="9 * 60"
      :time-to="16 * 60"
      editable-events
      @event-drop="onEventDrop")
    vue-cal.ml-1.flex.external-events-drag-and-drop.vuecal--green-theme(
      small
      hide-view-selector
      hide-weekends
      :disable-views="['years', 'year', 'month', 'day']"
      :time-from="9 * 60"
      :time-to="16 * 60"
      editable-events
      @event-drop="onEventDrop")

  sshpre(language="html-vue" label="Vue Template").
    &lt;!-- Three HTML5 draggable events. --&gt;
    &lt;div class="external-event"
         v-for="(item, i) in draggables"
         :key="i"
         draggable="true"
         @dragstart="onEventDragStart($event, item)"&gt;
         &lt;strong&gt;{{ '\{\{ item.title \}\}' }}&lt;/strong&gt;
         ({{ "\{\{ item.duration ? `${item.duration} min` : 'no duration' \}\}" }})
      &lt;div&gt;{{ '\{\{ item.content \}\}' }}&lt;/div&gt;
    &lt;/div&gt;

    &lt;vue-cal small
             hide-view-selector
             hide-weekends
             :disable-views="['years', 'year', 'month', 'day']"
             :time-from="9 * 60"
             :time-to="16 * 60"
             editable-events
             @event-drop="onEventDrop"&gt;
    &lt;/vue-cal&gt;
  sshpre(language="js" label="Javascript - Vue Component").
    export default {
      data: () => ({
        draggables: [
          {
            // The id (or however you name it), will help you find which event to delete
            // from the callback triggered on drop into Vue Cal.
            id: 1,
            title: 'Ext. Event 1',
            content: 'content 1',
            duration: 60
          },
          {
            id: 2,
            title: 'Ext. Event 2',
            content: 'content 2',
            duration: 30
          },
          {
            id: 3,
            title: 'Ext. Event 3',
            content: 'content 3'
            // No defined duration here: will default to 2 hours.
          }
        ]
      }),
      methods: {
        onEventDragStart (e, draggable) {
          // Passing the event's data to Vue Cal through the DataTransfer object.
          e.dataTransfer.setData('event', JSON.stringify(draggable))
          e.dataTransfer.setData('cursor-grab-at', e.offsetY)
        },
        // The 3 parameters are destructured from the passed $event in @event-drop="onEventDrop".
        // `event` is the final event as Vue Cal understands it.
        // `originalEvent` is the event that was dragged into Vue Cal, it can come from the same
        //  Vue Cal instance, another one, or an external source.
        // `external` is a boolean that lets you know if the event is not coming from any Vue Cal.
        onEventDrop ({ event, originalEvent, external }) {
          // If the event is external, delete it from the data source on drop into Vue Cal.
          // If the event comes from another Vue Cal instance, it will be deleted automatically in there.
          if (external) {
            const extEventToDeletePos = this.draggables.findIndex(item => item.id === originalEvent.id)
            if (extEventToDeletePos > -1) this.draggables.splice(extEventToDeletePos, 1)
          }
        }
      }
    }
  //- Example.
  h4.title
    a(href="#ex--more-advanced-event-creation") # More advanced event creation
    a#ex--more-advanced-event-creation(name="ex--more-advanced-event-creation")
  p.
    There are 3 ways to create an event: on cell click  &amp; hold (default), on cell single/double click,
    or programmatically.
  highlight-message Event creation will not trigger with a single/double click or click &amp; hold #[strong if your cursor is on an event].
  p Let's see the 3 cases in order of complexity:

  ol.pl-3
    li.mt-3
      h5.subtitle-1.font-weight-bold On cell single or double click
      p.
        As the #[span.code cell-click] &amp; #[span.code cell-dblclick] emitted
        events return a date and time at cursor position (refer to the
        #[a(href="#ex--emitted-events") emitted events example]),
        you simply need to call the #[span.code createEvent()] function straight
        away from #[span.code cell-dblclick]:
      v-layout(wrap)
        v-card.flex.my-2.mr-3(style="height: 280px")
          vue-cal.vuecal--green-theme.vuecal--full-height-delete(
            ref="vuecal3"
            selected-date="2018-11-19"
            small
            :time-from="10 * 60"
            :time-to="16 * 60"
            :disable-views="['years', 'year', 'month', 'day']"
            hide-view-selector
            hide-title-bar
            hide-weekends
            :cell-click-hold="false"
            editable-events
            :events="events"
            @cell-dblclick="$refs.vuecal3.createEvent($event, 120, { title: 'New Event', class: 'blue-event' })")
        sshpre.my-2(language="html-vue" style="font-size: 0.8em").
          &lt;vue-cal
            ref="vuecal"
            selected-date="2018-11-19"
            small
            :time-from="10 * 60"
            :time-to="16 * 60"
            :disable-views="['years', 'year']"
            hide-view-selector
            hide-weekends
            hide-title-bar
            :cell-click-hold="false"
            editable-events
            :events="events"
            @cell-dblclick="$refs.vuecal.createEvent(
              $event,
              120,
              { title: 'New Event', class: 'blue-event' }
            )"&gt;
          &lt;/vue-cal&gt;
      p You may then want to disable the default event creation on cell click &amp; hold by setting #[span.code :cell-click-hold="false"]
    li.mt-12
      h5.subtitle-1.font-weight-bold Programmatically &amp; externally
      p.my-2.
        To allow an external button to create events, you will need to call the
        vue-cal #[span.code createEvent()] function from a Vue ref.
      v-layout.mb-3(align-center)
        | This
        v-btn.mx-1(x-small color="primary" @click="customEventCreation") button
        | will prompt you to choose a date and time as the event start.

      v-layout(align-top wrap)
        v-card.flex.my-2.mr-3(style="height: 280px")
          vue-cal.vuecal--green-theme.vuecal--full-height-delete(
            ref="vuecal"
            selected-date="2018-11-19"
            small
            :time-from="10 * 60"
            :time-to="16 * 60"
            :disable-views="['years', 'year']"
            hide-view-selector
            hide-title-bar
            hide-weekends
            editable-events
            :events="events")
        sshpre.my-2(language="html-vue" style="font-size: 0.8em").
          &lt;button @click="customEventCreation"&gt;
              button
          &lt;/button&gt;

          &lt;vue-cal ref="vuecal"
                   selected-date="2018-11-19"
                   small
                   :time-from="10 * 60"
                   :time-to="16 * 60"
                   :disable-views="['years', 'year']"
                   hide-view-selector
                   hide-title-bar
                   hide-weekends
                   editable-events
                   :events="events"&gt;
          &lt;/vue-cal&gt;
      p Then you can give custom event attributes as you wish:
      sshpre.mt-3(language="js" label="Javascript").
        // In methods.
        customEventCreation () {
            const dateTime = prompt('Create event on (YYYY-MM-DD HH:mm)', '2018-11-20 13:15')

            // Check if date format is correct before creating event.
            if (/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}$/.test(dateTime)) {
              this.$refs.vuecal.createEvent(
                // Formatted start date and time or JavaScript Date object.
                dateTime,
                // Event duration in minutes (Integer).
                120,
                // Custom event props (optional).
                { title: 'New Event', content: 'yay! 🎉', class: 'blue-event' }
              )
            } else if (dateTime) alert('Wrong date format.')
        }

    li.mt-12
      h5.subtitle-1.font-weight-bold Adding a dialog box to the default #[strong cell click &amp; hold] behavior
      p.mt-3.
        By default, event will be created with these attributes:
      sshpre.mt-0(language="js" label="Javascript").
        {
            start: {String}, // (Formatted date) starting from your cursor position in the day cell you clicked.
            end: {String}, // (Formatted date) Event start + 2 hours
            title: '',
            content: '',
            split /* if any */: {Integer | String} // The current day split id you clicked.
        }

      p.
        If you want to customize those attributes you can modify the event directly through
        the callback function that you provide to #[span.code :on-event-create] as follows:#[br]
      sshpre.mt-6(language="js" label="Javascript").
        // :on-event-create="onEventCreate", in template.

        /**
        * @param event {Object} The newly created event that you can override.
        * @param deleteEventFunction {Function} Allows you to delete this event programmatically.
        * @return {Object | false} The event to be passed back to Vue Cal, or false to reject creation.
        */
        onEventCreate (event, deleteEventFunction) {
            // You can modify event here and return it.
            // You can also return false to reject the event creation.
            return event
        }

      p.
        In this example, we are adding a dialog box to the default simple click &amp; hold.#[br]
        The dialog box will allow you to set all the event attributes.
      v-layout(wrap)
        v-card.flex.my-2.mr-3.main-content(style="height: 280px")
          vue-cal.vuecal--green-theme.vuecal--full-height-delete(
            selected-date="2018-11-19"
            small
            :time-from="10 * 60"
            :time-to="16 * 60"
            :disable-views="['years', 'year']"
            hide-view-selector
            hide-title-bar
            hide-weekends
            editable-events
            :events="events"
            :on-event-create="onEventCreate")
        sshpre.my-2.caption(language="html-vue").
          &lt;vue-cal selected-date="2018-11-19"
                   small
                   :time-from="10 * 60"
                   :time-to="16 * 60"
                   :disable-views="['years', 'year']"
                   hide-view-selector
                   hide-weekends
                   hide-title-bar
                   editable-events
                   :events="events"
                   :on-event-create="onEventCreate"&gt;
          &lt;/vue-cal&gt;
    sshpre(language="html-vue" label="Vue Template - dialog box").
      &lt;!-- Using Vuetify --&gt;
      &lt;v-dialog v-model="showEventCreationDialog" :persistent="true" max-width="420"&gt;
        &lt;v-card&gt;
          &lt;v-card-title&gt;
            &lt;v-text-field v-model="selectedEvent.title" placeholder="Event Title"/&gt;
          &lt;/v-card-title&gt;
          &lt;v-card-text&gt;
            &lt;v-textarea v-model="selectedEvent.content" placeholder="Event Content"/&gt;
            &lt;v-layout&gt;
              &lt;v-select
                :items="eventsCssClasses"
                placeholder="Event CSS Class"
                @change="selectedEvent.class = $event"
                :value="selectedEvent.class"/&gt;
              &lt;v-switch v-model="selectedEvent.background" label="background Event"/&gt;
            &lt;/v-layout&gt;
            &lt;v-layout&gt;
              &lt;v-btn @click="cancelEventCreation()"&gt;Cancel&lt;/v-btn&gt;
              &lt;v-btn @click="closeCreationDialog()"&gt;Save&lt;/v-btn&gt;
            &lt;/v-layout&gt;
          &lt;/v-card-text&gt;
        &lt;/v-card&gt;

    sshpre(language="js" label="Javascript").
      data: () => ({
        selectedEvent: null,
        showEventCreationDialog: false,
        eventsCssClasses: ['leisure', 'sport', 'health']
      }),
      methods: {
        onEventCreate (event, deleteEventFunction) {
          this.selectedEvent = event
          this.showEventCreationDialog = true
          this.deleteEventFunction = deleteEventFunction

          return event
        },
        cancelEventCreation () {
          this.closeCreationDialog()
          this.deleteEventFunction()
        },
        closeCreationDialog () {
          this.showEventCreationDialog = false
          this.selectedEvent = {}
        }
      }

  //- Example.
  h4.title
    a(href="#ex--multiple-day-events") # Multiple day events
    a#ex--multiple-day-events(name="ex--multiple-day-events")
  p.
    Multiple day events work like a set of single day events linked together.#[br]
    Deleting one of the day of a multiple day event, will also delete all the other days.#[br]
    Updating the duration by dragging or changing the title will also update on all the days.#[br]
    Try to resize, rename and delete the events.#[br]You can also resize horizontally thanks to
    the option #[span.code resize-x].
  strong Drag &amp; drop is not available on multiple day events for now.

  highlight-message(type="tips").
    3 CSS classes are available to target the event first day, the last day and all the days in between:
    #[span.code event-start], #[span.code event-middle], #[span.code event-end].
  v-card.my-2.ma-auto.main-content
    vue-cal.vuecal--green-theme.ex--multiple-day-events.vuecal--full-height-delete(
      selected-date="2018-11-19"
      :time-from="8 * 60"
      :time-to="23 * 60"
      hide-weekends
      events-count-on-year-view
      editable-events
      resize-x
      :events="multipleDayEvents")
  sshpre(language="html-vue" label="Vue Template").
    &lt;vue-cal selected-date="2018-11-19"
             :time-from="8 * 60"
             :time-to="23 * 60"
             :disable-views="['years', 'year', 'month']"
             hide-weekends
             editable-events
             resize-x
             :events="events"&gt;
    &lt;/vue-cal&gt;

  sshpre(language="js" label="Javascript").
    data: () => ({
      events: [
        {
          start: '2018-11-16 10:00',
          end: '2018-11-20 12:37',
          title: 'Running Marathon',
          content: '&lt;i class="v-icon material-icons"&gt;directions_run&lt;/i&gt;',
          class: 'sport'
        },
        {
          start: '2018-11-20 10:00',
          end: '2018-11-20 10:25',
          title: 'Drink water!',
          content: '&lt;i class="v-icon material-icons"&gt;local_drink&lt;/i&gt;',
          class: 'health'
        },
        {
          start: '2018-11-21 19:00',
          end: '2018-11-23 11:30',
          title: 'Trip to India',
          content: '&lt;i class="v-icon material-icons"&gt;flight&lt;/i&gt;',
          class: 'leisure'
        }
      ]
    })

  //- Example.
  h4.title
    a(href="#ex--recurring-events")
      | # Recurring events
      v-chip.ml-2.white--text(small color="red") Coming soon - Delayed
    a#ex--recurring-events(name="ex--recurring-events")
  .mt-4 #[strong When it will be ready, this is how it will work.]
  .mb-2 You can repeat an event:
  ul
    li Every day - by providing a #[span.code every: "day"] property.
    li Every week - by providing a #[span.code every: "week"] property.
    li Every month - by providing a #[span.code every: "month"] property.
    li Every year - by providing a #[span.code every: "year"] property.
    li Every specific week days - by providing a #[span.code weekdays] array containing the weekdays numbers (1 to 7 for Sunday).
    li Every `x` days - by providing a #[span.code every: x] property, with #[span.code x] being an integer.
    li Forever; Or until an expiry date if you provide an #[span.code until: {String | Date}] property.
    li Whether it's single-day, multiple-day, background, all-day, with time or timeless.
  sshpre(language="js" label="Still to do...").
    // month view event count => OK.
    // @todo: check years/year views event counts.
    // @todo: repeated multiple-day events does not appear if the first day is not in view (e.g. hide weekend).
    // @todo: on month view with show events, occurrences don't appear on out of scope days.
    // @todo: overlapping does not work.
    // @todo: if 2 occurences are in the same day (multiple-day events), only one is shown.
    // @todo: check all the above points one by one.

  p.
    Recurrring events work like a set of single day events linked together.#[br]
    That means, deleting, resizing or editing one of the day will apply to all the other days.
  v-card.my-4.ma-auto.py-12.grey.lighten-5.elevation-1
    .text-center.headline.grey--text Demo coming soon.
  sshpre(language="html-vue" label="Vue Template").
    &lt;vue-cal selected-date="2018-11-19"
             :time-from="8 * 60"
             :time-to="23 * 60"
             hide-weekends
             events-count-on-year-view
             editable-events
             show-all-day-events
             :events="events"&gt;
    &lt;/vue-cal&gt;

  sshpre(language="js" label="Javascript").
    data: () => ({
      events: [
        {
          start: '2018-11-19 22:00',
          end: '2018-11-20 11:00',
          title: 'Nightclub',
          content: '&lt;i class="v-icon material-icons"&gt;local_drink&lt;/i&gt;',
          class: 'leisure',
          repeat: {
            weekdays: [1, 3], // You can repeat on multiple days of the week.
            until: '2020-11-30' // Don't need a time here as it will take the same as original event date.
          }
        },
        {
          start: '2018-11-23', // You can put time or not, will be discarded if all-day.
          end: '2018-11-23',
          title: 'Pizza day!',
          content: '&lt;i class="v-icon material-icons"&gt;local_pizza&lt;/i&gt;',
          class: 'pink-event',
          allDay: true,
          repeat: {
            weekdays: [5] // If original event day is not in these days, original event will still show up.
            // Without `until` property, it will go on forever.
          }
        },
        {
          start: '2018-11-22 10:00',
          end: '2018-11-22 12:00',
          title: 'Piano lesson',
          content: '&lt;i class="v-icon material-icons"&gt;queue_music&lt;/i&gt;',
          class: 'leisure',
          repeat: {
            every: 'week',
            until: new Date('2019/06/01') // You can also use a Javascript Date.
          }
        },
        {
          start: '2018-11-20 18:00',
          end: '2018-11-20 20:00',
          title: 'Tennis tournament',
          content: '&lt;i class="v-icon material-icons"&gt;sports_tennis&lt;/i&gt;',
          class: 'sport',
          repeat: {
            every: 14,
            until: '2019-01-20'
          }
        },
        {
          start: '2018-11-01',
          end: '2018-11-01',
          title: 'Crêpes day',
          content: '&lt;i class="v-icon material-icons"&gt;restaurant&lt;/i&gt;',
          class: 'yellow-event',
          allDay: true,
          repeat: {
            every: 'month',
            until: '2019-12-26'
          }
        },
        {
          start: '2015-06-15',
          end: '2015-06-15',
          title: 'My Birthday',
          content: '&lt;i class="v-icon material-icons"&gt;cake&lt;/i&gt;&lt;br&gt;I am 4.',
          class: 'blue-event',
          allDay: true,
          repeat: {
            every: 'year'
          }
        }
      ]
    })

  //- Example.
  h4.title
    a(href="#ex--overlapping-events") # Overlapping events
    a#ex--overlapping-events(name="ex--overlapping-events")
  p.
    Overlapping, editable &amp; deletable events.#[br]
    Try to resize &amp; delete events to see the overlapping redrawn.

  v-layout.mb-3(align-center)
    | Optionally you can set a min width (in percent) to the events:
    v-btn.ml-2(small color="primary" @click="minEventWidth = minEventWidth ? 0 : 50")
      v-icon {{ minEventWidth ? 'close' : 'add' }}
      | {{ minEventWidth ? 'min-event-width="50"' : 'Add min-event-width' }}
  div(style="min-height: 40px")
    v-slide-y-transition
      .grey--text(v-if="minEventWidth").
        #[span.code min-event-width="50"] will only apply a min width of 50% on events that
        would be smaller than that.
  highlight-message.mb-6.
    In some cases you may want to set the events overlaps calculation only per same time step
    (default time step is 1 hour), like in
    #[a(href="https://github.com/antoniandre/vue-cal/pull/182" target="_blank") this use case].#[br]
    You can achieve this event overlaps grouping with the option #[span.code overlaps-per-time-step].

  v-card.my-2.ma-auto.main-content
    vue-cal.vuecal--green-theme.vuecal--full-height-delete(
      selected-date="2018-11-19"
      :time-from="10 * 60"
      :time-to="23 * 60"
      :disable-views="['years', 'year', 'month']"
      hide-weekends
      editable-events
      :min-event-width="minEventWidth"
      :events="overlappingEvents")
  sshpre(language="html-vue" label="Vue Template").
    &lt;vue-cal selected-date="2018-11-19"
             :time-from="10 * 60"
             :time-to="23 * 60"
             :disable-views="['years', 'year', 'month']"
             hide-weekends
             editable-events
             :min-event-width="minEventWidth"
             :events="events"&gt;
    &lt;/vue-cal&gt;

  sshpre(language="js" label="Javascript").
    data: () => ({
      minEventWidth: 0,
      events: [
        {
          start: '2018-11-21 14:00',
          end: '2018-11-21 22:00',
          title: 'A big thing',
          content: '&lt;i class="v-icon material-icons"&gt;sentiment_satisfied_alt&lt;/i&gt;',
          class: 'health'
        },
        {
          start: '2018-11-21 16:00',
          end: '2018-11-21 19:00',
          title: 'Another thing',
          content: '&lt;i class="v-icon material-icons"&gt;thumb_up&lt;/i&gt;',
          class: 'blue-event'
        },
        {
          start: '2018-11-20 18:30',
          end: '2018-11-20 20:30',
          title: 'Crossfit',
          content: '&lt;i class="v-icon material-icons"&gt;fitness_center&lt;/i&gt;',
          class: 'sport'
        },
        ...
      ]
    })

  //- Example.
  h4.title
    a(href="#ex--background-events") # Background events
    a#ex--background-events(name="ex--background-events")
  p.
    Just add the property #[span.code background: true] to your events.#[br]
    The particularity of the background events is that they can fully be overlapped but not overlapping.#[br]
    They are not affected by other events: they stay in the background occupying the whole cell/split width.#[br]
    Note that you can still temporarily raise a background event on top of others (z-index) by hovering it or clicking it.
    Refer to the #[span.code events] option in the #[a(href="#api") API] section.
  v-card.my-2.ma-auto.main-content
    vue-cal.vuecal--green-theme(
      selected-date="2018-11-19"
      :time-from="7 * 60"
      :time-to="23 * 60"
      :disable-views="['years', 'year', 'month']"
      hide-weekends
      :events="backgroundEvents")
  sshpre(language="html-vue" label="Vue Template").
    &lt;vue-cal selected-date="2018-11-19"
             :time-from="7 * 60"
             :time-to="23 * 60"
             :disable-views="['years', 'year', 'month']"
             hide-weekends
             :events="events"&gt;
    &lt;/vue-cal&gt;

  sshpre(language="js" label="Javascript").
    data: () => ({
      events: [
        {
          start: '2018-11-19 12:00',
          end: '2018-11-19 14:00',
          title: 'LUNCH',
          class: 'lunch',
          background: true
        },
        {
          start: '2018-11-20 12:00',
          end: '2018-11-20 14:00',
          title: 'LUNCH',
          class: 'lunch',
          background: true
        },
        ...
      ]
    })

  sshpre(language="css" label="CSS").
    .vuecal__event.lunch {
      background: repeating-linear-gradient(45deg, transparent, transparent 10px, #f2f2f2 10px, #f2f2f2 20px);/* IE 10+ */
      color: #999;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .vuecal__event.lunch .vuecal__event-time {display: none;align-items: center;}

  //- Example.
  h4.title
    a(href="#ex--all-day-events") # All day events
    a#ex--all-day-events(name="ex--all-day-events")

  ul
    li.mb-2.
      When the #[span.code showAllDayEvents] is set to #[span.code true] the events with an
      #[span.code allDay] attribute set to #[span.code true] will be displayed in a fixed top
      bar on the #[span.code week] &amp; #[span.code day] views.#[br]
      The all day events bar will only show up if the options #[span.code showAllDayEvents] &amp;
      #[span.code time] are set to #[span.code true].#[br]
      #[span.code time] is important since without time information every event is an all-day
      event there is no point in separating them then.
    li.mb-2.
      When #[span.code showAllDayEvents] is set to #[span.code false], all the all day events
      (#[span.code allDay] attribute set to #[span.code true]), will show up as a normal
      #[strong background event].
    li.mb-2.
      On month view, switching #[span.code showAllDayEvents] on and off will not have any impact
      since both should display the all day events.
    li.mb-2.
      #[span.code showAllDayEvents] accepts a #[span.code Boolean] or the string
      #[span.code 'short'], to display only the event title.

  highlight-message.
    Multiple-day events feature will be improved in a future version to display across
    multiple cells in the all day bar.

  v-btn.ma-1(small color="primary" @click="showAllDayEvents = (showAllDayEvents + 1) % 3")
    span.code :show-all-day-events="{{ ["'short'", 'true', 'false'][showAllDayEvents] }}"
  v-btn.ma-1(small color="primary" @click="shortEventsOnMonthView = !shortEventsOnMonthView")
    span.code :events-on-month-views="{{ ['true', "'short'"][shortEventsOnMonthView * 1] }}"

  v-card.my-2.ma-auto.main-content
    vue-cal.vuecal--green-theme.ex--all-day-events(
      selected-date="2019-02-11"
      :time-from="7 * 60"
      :disable-views="['years', 'year']"
      hide-weekends
      :show-all-day-events="['short', true, false][showAllDayEvents]"
      :events-on-month-view="[true, 'short'][shortEventsOnMonthView * 1]"
      :events="allDayEvents")
  sshpre(language="html-vue" label="Vue Template").
    &lt;button @click="showAllDayEvents = (showAllDayEvents + 1) % 3"&gt;
      :show-all-day-events="{{ "\{\{ [\"'short'\", 'true', 'false'][showAllDayEvents] \}\}" }}"
    &lt;/button&gt;
    &lt;button @click="shortEventsOnMonthView = !shortEventsOnMonthView"&gt;
      :events-on-month-views="{{ "\{\{ ['true', \"'short'\"][shortEventsOnMonthView * 1] \}\}" }}"
    &lt;/button&gt;

    &lt;vue-cal selected-date="2019-02-11"
             :time-from="7 * 60"
             :disable-views="['years', 'year']"
             hide-weekends
             :show-all-day-events="['short', true, false][showAllDayEvents]"
             :events-on-month-view="[true, 'short'][shortEventsOnMonthView * 1]"
             :events="events"&gt;
    &lt;/vue-cal&gt;
  sshpre(language="js" label="Javascript").
    showAllDayEvents: 0,
    shortEventsOnMonthView: false,
    events: [
      {
        start: '2019-02-12',
        end: '2019-02-12',
        title: 'Day off!',
        content: '&lt;i class="v-icon material-icons"&gt;beach_access&lt;/i&gt;',
        class: 'yellow-event',
        allDay: true
      },
      {
        start: '2019-02-14',
        end: '2019-02-14',
        title: 'Valentine\'s day',
        content: '&lt;i class="v-icon material-icons"&gt;favorite_outline&lt;/i&gt;',
        class: 'pink-event',
        allDay: true
      },
      ...
    ]

  sshpre(language="css" label="CSS").
    .vuecal__cell-content {align-self: flex-start;}
    .vuecal__cell-date {text-align: right;padding: 4px;}

    .vuecal--week-view .vuecal__bg .vuecal__event--all-day.pink-event,
    .vuecal--day-view .vuecal__bg .vuecal__event--all-day.pink-event {right: 50%;}
    .vuecal--week-view .vuecal__bg .vuecal__event--all-day.leisure,
    .vuecal--day-view .vuecal__bg .vuecal__event--all-day.leisure {left: 50%;}

  //- Example.
  h4.title
    a(href="#ex--splitting-days") # Splitting days &amp; split events
    a#ex--splitting-days(name="ex--splitting-days")
  p.mb-6
    | Split each day into multiple containers passing a CSS class &amp; a label per split, and allow split-specific events.
    br
    br
    | By default the body of the calendar will fit the container.#[br]
    | But with the options #[span.code min-cell-width] or #[span.code min-split-width], you can increase the calendar
    | body width and it will become scrollable horizontally.
    ul
      li #[span.code min-cell-width.black--text] will only be activated on week view, since there is only 1 cell in day view.
      li If both #[span.code min-cell-width] and #[span.code min-split-width] are set, #[span.code min-split-width] will be used.

    | #[br]You can also use the option #[span.code sticky-split-labels] to place the split labels in the header.#[br]#[br]

    | You can toggle the splits thanks to the #[span.code hide] property of each split in #[span.code splitDays].#[br]#[br]

    | Refer to the #[span.code min-cell-width.black--text], #[span.code min-split-width] and #[span.code splitDays] option in the #[a(href="#api") API] section.#[br]#[br]

    v-layout(align-center)
      v-btn.px-2.mr-2(
        small
        color="primary"
        :outlined="!splitsExample.minCellWidth"
        @click="splitsExample.minCellWidth = splitsExample.minCellWidth ? 0 : 400")
        v-icon.mr-2 {{ splitsExample.minCellWidth ? 'close' : 'add' }}
        | {{ splitsExample.minCellWidth ? `Min cell width: ${splitsExample.minCellWidth}px` : 'Add min cell width' }}

      v-btn.px-2.mr-2(
        small
        color="primary"
        :outlined="!splitsExample.minSplitWidth"
        @click="splitsExample.minSplitWidth = splitsExample.minSplitWidth ? 0 : 200")
        v-icon.mr-2 {{ splitsExample.minSplitWidth ? 'close' : 'add' }}
        | {{ splitsExample.minSplitWidth ? `Min split width: ${splitsExample.minSplitWidth}px` : 'Add min split width' }}

      v-btn.px-2.mr-2(
        small
        color="primary"
        :outlined="!splitsExample.stickySplitLabels"
        @click="splitsExample.stickySplitLabels = !splitsExample.stickySplitLabels")
        v-icon.mr-2 {{ splitsExample.stickySplitLabels ? 'close' : 'add' }}
        | Sticky Split Labels

      v-btn.px-2(
        small
        color="primary"
        :outlined="splitsExample.splitDays[1].hide"
        @click="splitsExample.splitDays[1].hide = !splitsExample.splitDays[1].hide")
        v-icon.mr-2 {{ splitsExample.splitDays[1].hide ? 'add' : 'remove' }}
        | {{ splitsExample.splitDays[1].hide ? 'Show' : 'Hide' }} Dad

  v-card.my-2.ma-auto(style="height: 600px")
    vue-cal.vuecal--green-theme(
      selected-date="2018-11-19"
      :time-from="8 * 60"
      :time-step="30"
      :disable-views="['years', 'year']"
      editable-events
      :events="splitEvents"
      show-week-numbers
      :split-days="splitsExample.splitDays"
      :sticky-split-labels="splitsExample.stickySplitLabels"
      :min-cell-width="splitsExample.minCellWidth"
      :min-split-width="splitsExample.minSplitWidth")
      template(v-slot:no-event) Nothing here.
  sshpre(language="html-vue" label="Vue Template").
    &lt;button @click="minCellWidth = minCellWidth ? 0 : 400"&gt;
      {{ '\{\{ minCellWidth ? \'min cell width: 400px\' : \'Add min cell width\' \}\}' }}
    &lt;/button&gt;
    &lt;button @click="minSplitWidth = minSplitWidth ? 0 : 200"&gt;
      {{ '\{\{ minSplitWidth ? \'min split width: 200px\' : \'Add min split width\' \}\}' }}
    &lt;/button&gt;
    &lt;button @click="stickySplitLabels = !stickySplitLabels"&gt;
      Sticky Split Labels
    &lt;/button&gt;
    &lt;button @click="splitDays[1].hide = !splitDays[1].hide"&gt;
      Show/Hide Dad
    &lt;/button&gt;

    &lt;vue-cal selected-date="2018-11-19"
             :time-from="8 * 60"
             :time-step="30"
             :disable-views="['years', 'year', 'month']"
             editable-events
             :events="events"
             :split-days="splitDays"
             :sticky-split-labels="stickySplitLabels"
             :min-cell-width="minCellWidth"
             :min-split-width="minSplitWidth"&gt;
    &lt;/vue-cal&gt;

  sshpre(language="js" label="Javascript").
    data: () => ({
      stickySplitLabels: false,
      minCellWidth: 400,
      minSplitWidth: 0,
      splitDays: [
        // The id property is added automatically if none (starting from 1), but you can set a custom one.
        // If you need to toggle the splits, you must set the id explicitly.
        { id: 1, class: 'mom', label: 'Mom' },
        { id: 2, class: 'dad', label: 'Dad', hide: false },
        { id: 3, class: 'kid1', label: 'Kid 1' },
        { id: 4, class: 'kid2', label: 'Kid 2' },
        { id: 5, class: 'kid3', label: 'Kid 3' }
      ]
      events: [
        {
          start: '2018-11-19 10:35',
          end: '2018-11-19 11:30',
          title: 'Doctor appointment',
          content: '&lt;i class="v-icon material-icons"&gt;local_hospital&lt;/i&gt;',
          class: 'health',
          split: 1 // Has to match the id of the split you have set (or integers if none).
        },
        {
          start: '2018-11-19 18:30',
          end: '2018-11-19 19:15',
          title: 'Dentist appointment',
          content: '&lt;i class="v-icon material-icons"&gt;local_hospital&lt;/i&gt;',
          class: 'health',
          split: 2
        },
        {
          start: '2018-11-20 18:30',
          end: '2018-11-20 20:30',
          title: 'Crossfit',
          content: '&lt;i class="v-icon material-icons"&gt;fitness_center&lt;/i&gt;',
          class: 'sport',
          split: 1
        },
        ...
      ]
    })

  sshpre(language="css" label="CSS").
    /* You can easily set a different style for each split of your days. */
    .vuecal__cell-split.dad {background-color: rgba(221, 238, 255, 0.5);}
    .vuecal__cell-split.mom {background-color: rgba(255, 232, 251, 0.5);}
    .vuecal__cell-split.kid1 {background-color: rgba(221, 255, 239, 0.5);}
    .vuecal__cell-split.kid2 {background-color: rgba(255, 250, 196, 0.5);}
    .vuecal__cell-split.kid3 {background-color: rgba(255, 206, 178, 0.5);}
    .vuecal__cell-split .split-label {color: rgba(0, 0, 0, 0.1);font-size: 26px;}

    /* Different color for different event types. */
    .vuecal__event.leisure {background-color: rgba(253, 156, 66, 0.9);border: 1px solid rgb(233, 136, 46);color: #fff;}
    .vuecal__event.health {background-color: rgba(164, 230, 210, 0.9);border: 1px solid rgb(144, 210, 190);}
    .vuecal__event.sport {background-color: rgba(255, 102, 102, 0.9);border: 1px solid rgb(235, 82, 82);color: #fff;}

  h3.title
    a(href="#ex--emitted-events")
      v-icon.mr-2(medium) swap_horiz
      | Communicating with Vue Cal

  //- Example.
  h4.title
    a(href="#ex--emitted-events") # Vue Cal emitted events
    a#ex--emitted-events(name="ex--emitted-events")
  p.mb-0.
    Vue Cal emits events that you can listen to, to trigger an action outside of Vue Cal.#[br]
    If you are not familiar with Vue JS events, you should read about it here:
    #[a(href="https://vuejs.org/v2/guide/events.html" target="_blank") vuejs.org/v2/guide/events.html #[v-icon(small color="primary") open_in_new]]#[br]#[br]
    Here is the list of emitted events:
  h4.mt-2 View-related
  ul
    li #[code ready]
    li #[code view-change]
    li #[code cell-click] - returns a JS native #[span.code Date] object
    li #[code cell-dblclick] - returns a JS native #[span.code Date] object
    li #[code cell-contextmenu] - returns a JS native #[span.code Date] object and x, y: the cursor coordinates.
    li #[code cell-keypress-enter] - returns a JS native #[span.code Date] object
    li #[code cell-focus] - returns a JS native #[span.code Date] object
  highlight-message(type="tips")
    ul
      li.
        #[span.code cell-click] is fired every time you click a day, whereas
        #[span.code cell-focus] is fired only when the selected day changes.
      li.
        #[span.code cell-click], #[span.code cell-dblclick], #[span.code cell-contextmenu]
        and #[span.code cell-focus] return the time at cursor position, unless the cell
        was focused from tab key.
        It would then return the cell start date (at midnight).
      li.
        If split-days is provided, #[span.code cell-click], #[span.code cell-dblclick], #[span.code cell-keypress-enter]
        and #[span.code cell-focus] emitted events will return an object containing the date and the clicked split id.

  highlight-message
    | The emitted events #[span.code ready] &amp; #[span.code view-change] return an object:#[br]
    sshpre.mt-2(language="js").
      {
        view: [String],
        startDate: [Date], // View start - JS native Date object.
        endDate: [Date], // View end - JS native Date object.
        firstCellDate: [Date], // Month view only, in case cell is out of current month - JS native Date object.
        lastCellDate: [Date], // Month view only, in case cell is out of current month - JS native Date object.
        outOfScopeEvents: [Array], // Month view only, all the events that are out of the current month.
        events: [Array], // All the events in the current view.
        week: [Integer] // Week number. Only returned if view is 'week'.
      }
    strong.
      Note that on a month view, the events from the out of scope days
      (cells before and after the current month) are also returned in the array.

  h4.mt-2 Events-related
  ul
    li.mt-3 #[code.mr-1 event-focus] - returns the associated calendar event object.
    li.mt-3 #[code.mr-1 event-mouse-enter] - returns the associated calendar event object.
    li.mt-3 #[code.mr-1 event-mouse-leave] - returns the associated calendar event object.
    li.mt-3 #[code.mr-1 event-create] - returns the associated calendar event object.
    li.mt-3 #[code.mr-1 event-delete] - returns the associated calendar event object.
    li.mt-2 #[code event-title-change] - returns an object containing:
      ul
        li #[span.code event], the calendar event object that was dropped
        li #[span.code oldTitle], the title of the event before it was edited

    //- li #[span.code event-content-change]
    li.mt-2
      code.mr-1 event-duration-change
      span.grey--text (only fired at the end of the event resizing)
      | #[br]Returns an object containing:
      ul
        li #[span.code event], the calendar event object that was resized
        li #[span.code oldDate], the Javascript Date the event was ending at before resize
    li.mt-2
      code.mr-1 event-resizing
      span.grey--text Fired repeatedly while resizing
      | #[br]For performance while dragging, returns a lighter object containing:
      ul
        li #[span.code _eid], the calendar event internal id.
        li #[span.code end], the calendar event new end Date.
        li #[span.code endTimeMinutes], the calendar event new end time in minutes.
      highlight-message(type="warning").
        You should only listen to this event if you have no choice. In most of cases you should
        listen to #[span.code event-duration-change] instead (fired only once at the end of the resizing).
    li.mt-2
      code.mr-1 event-drop
      | - returns an object containing:
      ul
        li #[span.code event], the calendar event object that was dropped
        li #[span.code oldDate], the Javascript Date the event was starting from before drag
        li #[span.code newDate], the Javascript Date the event is now starting from
        li #[span.code oldSplit] only if splitting days, the id of the split the event came from
        li #[span.code newSplit] only if splitting days, the id of the split the event is dropped into
    li.mt-3 #[code.mr-1 event-change] - returns an object containing:
      ul
        li #[span.code event], the calendar event object that was changed
        li.
          #[span.code originalEvent], the same calendar event before the change
          (#[span.code null] when creating event)

  highlight-message(type="tips")
    ul
      li.
        The #[span.code event-change] emitted event groups all the events triggered on a calendar event property change:
        #[span.code event-title-change], #[span.code event-drop],
        #[span.code event-duration-change] and #[span.code event-create]. So you have the choice to listen to
        #[span.code event-change] to cover any calendar event change or listen to a specific action emitted event.
      li.mt-3.
        To help you manipulate an event's date, Vue Cal returns native #[span.code Date]
        objects in the event properties #[span.code start] &amp; #[span.code end].#[br]
        So for instance, you can easily access the day of the week of an event with #[span.code event.start.getDay()].#[br]
        You can then use Vue Cal #[a(href="#date-prototypes") Date prototypes] to manipulate and format the Date as you want.

  p.mb-0 Watch the list of emitted events (#[strong latest on top]) as you play with Vue Cal:
  pre.mt-2.ssh-pre.mb-2
    v-layout(wrap align-center)
      .grey--text //&nbsp;
        strong event-name:&nbsp;
        span arguments-list
      v-spacer
      v-btn(color="primary" outlined small @click="clearEventsLog")
        v-icon(small).mr-1 clear
        | Clear log
      v-btn.ml-2(color="primary" outlined small @click="logMouseEvents = !logMouseEvents")
        v-icon(small).mr-1 {{ logMouseEvents ? 'remove' : 'add' }}
        | {{ logMouseEvents ? 'Hide' : 'Track' }} mouse hover events
    .scrollable
      .mt-1(v-for="(l, i) in reversedLogs" :key="i")
        .v-divider.mb-1.grey.lighten-2(v-if="i")
        strong.mr-1 {{ l.name }}:
        span {{ l.args }}
  v-card.mt-6.mb-2.ma-auto.main-content
    vue-cal.vuecal--green-theme(
      selected-date="2018-11-19"
      :time-from="7 * 60"
      :time-to="23 * 60"
      :disable-views="['years', 'year']"
      hide-weekends
      editable-events
      :events="eventsCopy3"
      cell-contextmenu
      @ready="logEvents('ready', $event)"
      @view-change="logEvents('view-change', $event)"
      @cell-click="logEvents('cell-click', $event)"
      @cell-dblclick="logEvents('cell-dblclick', $event)"
      @cell-contextmenu="logEvents('cell-contextmenu', $event)"
      @cell-focus="logEvents('cell-focus', $event)"
      @event-focus="logEvents('event-focus', $event)"
      @event-mouse-enter="logMouseEvents && logEvents('event-mouse-enter', $event)"
      @event-mouse-leave="logMouseEvents && logEvents('event-mouse-leave', $event)"
      @event-title-change="logEvents('event-title-change', $event)"
      @event-content-change="logEvents('event-content-change', $event)"
      @event-duration-change="logEvents('event-duration-change', $event)"
      @event-drop="logEvents('event-drop', $event)"
      @event-create="logEvents('event-create', $event)"
      @event-delete="logEvents('event-delete', $event)")

  sshpre(language="html-vue" label="Vue Template").
    &lt;vue-cal selected-date="2018-11-19"
             :time-from="7 * 60"
             :time-to="23 * 60"
             :disable-views="['years', 'year']"
             hide-weekends
             editable-events
             :events="events"
             cell-contextmenu
             @ready="logEvents('ready', $event)"
             @view-change="logEvents('view-change', $event)"
             @cell-click="logEvents('cell-click', $event)"
             @cell-dblclick="logEvents('cell-dblclick', $event)"
             @cell-contextmenu="logEvents('cell-contextmenu', $event)"
             @cell-focus="logEvents('cell-focus', $event)"
             @event-focus="logEvents('event-focus', $event)"
             @event-mouse-enter="logEvents('event-mouse-enter', $event)"
             @event-mouse-leave="logEvents('event-mouse-leave', $event)"
             @event-title-change="logEvents('event-title-change', $event)"
             @event-content-change="logEvents('event-content-change', $event)"
             @event-duration-change="logEvents('event-duration-change', $event)"
             @event-drop="logEvents('event-drop', $event)"
             @event-create="logEvents('event-create', $event)"
             @event-delete="logEvents('event-delete', $event)"&gt;
    &lt;/vue-cal&gt;

  //- Example.
  h4.title
    a(href="#ex--external-controls") # External controls &amp; use of Vue Cal methods
    a#ex--external-controls(name="ex--external-controls")
  p.
    You can access any #[strong Vue Cal] internal method through Vue refs.#[br]
    This example shows how to control the Previous, Next and Today functions and the view selections
    from external buttons.#[br]
    One important thing to notice is that using the #[span.code .sync] keyword on #[span.code active-view]
    keeps it updated when Vue Cal changes the view internally. For instance when you click the title to go
    to a broader view.

  v-layout.my-2.mx-auto(align-center style="max-width: 500px")
    v-btn.mx-1.px-2.flex(small color="primary darken-1" @click="activeView = 'day'")
      v-icon.ml-n2.mr-1(small v-if="activeView === 'day'") check
      | Day
    v-btn.mx-1.px-2.flex(small color="primary darken-1" @click="activeView = 'week'")
      v-icon.ml-n2.mr-1(small v-if="activeView === 'week'") check
      | Week
    v-btn.mx-1.px-2.flex(small color="primary darken-1" @click="activeView = 'month'")
      v-icon.ml-n2.mr-1(small v-if="activeView === 'month'") check
      | Month
    v-btn.mx-1.px-2.flex(small color="primary darken-1" @click="activeView = 'year'")
      v-icon.ml-n2.mr-1(small v-if="activeView === 'year'") check
      | Year
    v-btn.mx-1.px-2.flex(small color="primary darken-1" @click="activeView = 'years'")
      v-icon.ml-n2.mr-1(small v-if="activeView === 'years'") check
      | Years

  v-layout.mt-2.mb-6.mx-auto(justify-center style="max-width: 500px")
    v-btn.mx-1.flex(small color="primary lighten-1" @click="$refs.vuecal4.previous()")
      v-icon.mr-1 keyboard_arrow_left
      | Previous
    v-btn.mx-1.flex(small color="primary lighten-1" @click="$refs.vuecal4.switchView('day', new Date())")
      v-icon.mr-1(small) my_location
      | Today
    v-btn.mx-1.flex(small color="primary lighten-1" @click="$refs.vuecal4.next()")
      | Next
      v-icon.ml-1 keyboard_arrow_right

  v-layout(align-center justify-center)
    vue-cal.vuecal--green-theme(
      small
      ref="vuecal4"
      :active-view.sync="activeView"
      :time="false"
      hide-view-selector
      :selected-date="selectedDate"
      style="max-width: 500px;height: 260px")
  sshpre(language="html-vue" label="Vue Template").
    &lt;button @click="activeView = 'day'"&gt;Day&lt;/button&gt;
    &lt;button @click="activeView = 'week'"&gt;Week&lt;/button&gt;
    &lt;button @click="activeView = 'month'"&gt;Month&lt;/button&gt;
    &lt;button @click="activeView = 'year'"&gt;Year&lt;/button&gt;
    &lt;button @click="activeView = 'years'"&gt;Years&lt;/button&gt;
    &lt;br /&gt;
    &lt;button @click="$refs.vuecal.previous()"&gt;Previous&lt;/button&gt;
    &lt;button @click="$refs.vuecal.switchView('day', new Date())"&gt;Today&lt;/button&gt;
    &lt;button @click="$refs.vuecal.next()"&gt;Next&lt;/button&gt;

    &lt;vue-cal small
      ref="vuecal"
      :active-view.sync="activeView"
      :time="false"
      hide-view-selector
      :selected-date="selectedDate"&gt;
    &lt;/vue-cal&gt;

  h5.subtitle-1.font-weight-bold Other useful Vue Cal internal methods &amp; Date prototypes
  highlight-message(type="tips")
    | Along with these Vue Cal internal methods that you can use externally,
    | you can also call other useful Vue Cal methods.
    ul
      li
        code switchToNarrowerView()
        p Will drilldown the current view on selected date if there is a narrower view available.
      li
        code minutesAtCursor(e)
        p.
          Will return the time (in minutes) at the cursor position when a DOM event occurs.
          `e` is the DOM event.

    strong Useful #[span.code Date] prototypes
    p.
      Don't miss out on these convenient functions! Read on in the
      #[a(href="date-prototypes") #[span.code Date] prototypes section].

  //- Example.
  h4.title
    a(href="#ex--sync-two-calendars") # Sync two vue-cal instances
    a#ex--sync-two-calendars(name="ex--sync-two-calendars")
  p.
    In this example the right calendar is used as a date picker and the selected date is
    updated on the left calendar via the #[span.code @cell-focus] event listener.#[br]
    To know more about emitted events refer to the
    #[a(href="#ex--emitted-events") emitted events example].

  v-layout(align-center justify-center)
    vue-cal.vuecal--blue-theme(
      small
      :time="false"
      hide-view-selector
      active-view="week"
      :disable-views="['years', 'year', 'month']"
      :selected-date="selectedDate"
      style="max-width: 360px;height: 260px")
    vue-cal.vuecal--blue-theme.vuecal--rounded-theme(
      xsmall
      :time="false"
      hide-view-selector
      active-view="month"
      :disable-views="['years', 'year', 'week', 'day']"
      @cell-focus="selectedDate = $event"
      style="max-width: 270px;height: 290px;transform: scale(0.9)")
  sshpre(language="html-vue" label="Vue Template").
    &lt;vue-cal small
      :time="false"
      hide-view-selector
      active-view="week"
      :disable-views="['years', 'year', 'month']"
      :selected-date="selectedDate"
      class="vuecal--blue-theme"
      style="max-width: 360px;height: 260px"&gt;
    &lt;/vue-cal&gt;
    &lt;vue-cal xsmall
      :time="false"
      hide-view-selector
      active-view="month"
      :disable-views="['years', 'year', 'week', 'day']"
      @cell-focus="selectedDate = $event"
      class="vuecal--blue-theme vuecal--rounded-theme"
      style="max-width: 270px;height: 290px"&gt;
    &lt;/vue-cal&gt;

  sshpre(language="js" label="Javascript").
    data: () => ({
      selectedDate: null
    })

  //- Example.
  h4.title
    a(href="#ex--modifying-events-from-outside") # Modifying the array of events outside of Vue Cal
    a#ex--modifying-events-from-outside(name="ex--modifying-events-from-outside")
  highlight-message(type="tips").
    It is possible to modify the array of events like adding or removing an event
    after the first load, but be aware that by doing so all the events in Vue Cal
    will be replaced by the new array of events. You may lose your changes if you
    modified events within Vue Cal.
  v-btn.ma-1(color="primary" small @click="eventsCopy.push({ start: '2018-11-20 12:00', end: '2018-11-20 17:00', title: 'A new event', class: 'blue-event' })")
    v-icon.mr-2 add
    | Add an event
  v-btn.ma-1(color="primary" small @click="eventsCopy.pop()")
    v-icon.mr-2 remove
    | Remove last event
  p.mb-0 Here is the live array of event titles:
  pre {{ eventsCopy.map(e => e.title) }}

  v-card.my-2.ma-auto.main-content
    vue-cal.vuecal--green-theme(
      selected-date="2018-11-19"
      :time-from="9 * 60"
      :time-to="23 * 60"
      :disable-views="['years', 'year', 'month']"
      hide-weekends
      :events="eventsCopy")
  sshpre(language="html-vue" label="Vue Template").
    &lt;button @click="events.push({
        start: '2018-11-20 12:00',
        end: '2018-11-20 17:00',
        title: 'A new event',
        class: 'blue-event'
    })"&gt;Add an event&lt;/button&gt;
    &lt;button @click="events.pop()"&gt;Remove last event&lt;/button&gt;

    &lt;vue-cal selected-date="2018-11-19"
             :time-from="9 * 60"
             :time-to="23 * 60"
             :disable-views="['years', 'year', 'month']"
             hide-weekends
             :events="events"&gt;
    &lt;/vue-cal&gt;

  sshpre(language="js" label="Javascript").
    data: () => ({
      events: [
        {
          start: '2018-11-19 10:35',
          end: '2018-11-19 11:30',
          title: 'Doctor appointment',
          content: '&lt;i class="v-icon material-icons"&gt;local_hospital&lt;/i&gt;',
          class: 'health'
        },
        ...
      ]
    })

  h3.title
    a(href="#ex--timeline-tweaking")
      v-icon.mr-2 tune
      | Advanced Vue Cal customization
      small.ml-2 #[em="- when CSS won't do it"]

  highlight-message.mt-6
    | Here is the list of available slots:
    ul
      li #[span.code title]
      li #[span.code arrow-prev]
      li #[span.code arrow-next]
      li #[span.code today-button]
      li #[span.code weekday-heading]
      li #[span.code time-cell]
      li #[span.code week-number-cell]
      li #[span.code cell-content]
      li #[span.code no-event]
      li #[span.code events-count]
      li #[span.code event]

  //- Example.
  h4.title
    a(href="#ex--scroll-to-time") # Scroll the view to a particular time
    a#ex--scroll-to-time(name="ex--scroll-to-time")
  p.mb-0.
    It is quite easy to scroll to a particular time, and the user has the choice to add this outside of Vue Cal.
  highlight-message(type="tips")
    | Bear in mind that IE11 needs a polyfill before you can use the scrollTo method on a DOM element, this single line will do.
    sshpre.mt-2.mb-0.flex(language="js").
      // For IE11. Adds this to your page once (in `created` hook for instance).
      if (!HTMLElement.prototype.scrollTo) HTMLElement.prototype.scrollTo = function ({ top }) { this.scrollTop = top }

  v-btn.mt-2.mr-2(small color="primary" @click="scrollToCurrentTime('.ex--scroll-to-time')")
    v-icon vertical_align_bottom
    | Scroll to current time
  v-btn.mt-2.mr-2(small color="primary" @click="scrollToTop('.ex--scroll-to-time')")
    v-icon vertical_align_top
    | Scroll to top
  v-layout(wrap)
    v-card.my-4.mr-2.flex(style="width: 360px;height: 360px;max-width: 100%")
      vue-cal.ex--scroll-to-time.vuecal--green-theme(
        small
        active-view="day"
        :disable-views="['years', 'year', 'month', 'week']"
        hide-view-selector
        :time-cell-height="timeCellHeight"
        @ready="scrollToCurrentTime('.ex--scroll-to-time')")
    .flex
      sshpre.mt-4.flex(language="html-vue" label="Vue Template").
        &lt;vue-cal id="vuecal"
                 :time-cell-height="timeCellHeight"
                 @ready="scrollToCurrentTime"&gt;
        &lt;/vue-cal&gt;
      sshpre.mt-4.flex(language="js" label="Javascript").
        // `timeCellHeight` is set to 26 in the component data.
        scrollToCurrentTime () {
          const calendar = document.querySelector('#vuecal .vuecal__bg')
          const hours = this.now.getHours() + this.now.getMinutes() / 60
          calendar.scrollTo({ top: hours * this.timeCellHeight, behavior: 'smooth' })
        },
        scrollToTop () {
          const calendar = document.querySelector('#vuecal .vuecal__bg')
          calendar.scrollTo({ top: 0, behavior: 'smooth' })
        }

  //- Example.
  h4.title
    a(href="#ex--timeline-tweaking") # Timeline tweaking
    a#ex--timeline-tweaking(name="ex--timeline-tweaking")
  p.mb-0.
    If you want to have more fancy time cells, you can override them with the
    #[span.code time-cell-height] option (in pixels) and scoped slots.#[br]
    For even more flexibility, the horizontal lines are painted when you set the CSS class #[span.code line] on the tag you choose.
    So if you don't set this class you are free to paint the lines yourself or not.
  v-card.my-2.ma-auto.main-content(style="width: 360px;height: 360px;max-width: 100%")
    vue-cal.vuecal--green-theme(
      small
      :time-from="5 * 60"
      :time-step="15"
      :time-cell-height="18"
      active-view="day"
      :disable-views="['years', 'year', 'month']"
      hide-weekends)
      template(v-slot:time-cell="{ hours, minutes }")
        .line(:class="{ hours: !minutes }")
          strong.primary--text(v-if="!minutes" style="font-size: 15px;line-height: 18px") {{ hours }}
          span(v-else style="font-size: 11px;line-height: 18px") {{ minutes }}
  highlight-message.mt-6(type="tips").
    If you are not familiar with scoped slots and destructuring slot-scope, you should first read about it:
    #[a(href="https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots" target="_blank") vuejs.org/v2/guide/components-slots.html #[v-icon(small color="primary") open_in_new]]
  sshpre(language="html-vue" label="Vue Template").
    &lt;vue-cal small
             :time-from="5 * 60"
             :time-step="15"
             :time-cell-height="18"
             active-view="day"
             :disable-views="['years', 'year', 'month']"
             hide-weekends&gt;
      &lt;template v-slot:time-cell="{ hours, minutes }"&gt;
        &lt;div :class="{ line: true, hours: !minutes }"&gt;
          &lt;strong v-if="!minutes" style="font-size: 15px"&gt;{{ '\{\{ hours \}\}' }}&lt;/strong&gt;
          &lt;span v-else style="font-size: 11px"&gt;{{ '\{\{ minutes \}\}' }}&lt;/span&gt;
        &lt;/div&gt;
      &lt;/template&gt;
    &lt;/vue-cal&gt;

  sshpre.mt-6(language="css" label="CSS").
    .vuecal__time-cell .hours.line:before {border-color: #42b983;}

  //- Example.
  h4.title
    a(href="#ex--custom-events-count") # Custom events count
    a#ex--custom-events-count(name="ex--custom-events-count")

  highlight-message(type="tips").
    Using Vue.js scoped slots, you can also override the counting events method if you need.#[br]
    If you are not familiar with scoped slots and destructuring slot-scope, you should first read about it:
    #[a(href="https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots" target="_blank") vuejs.org/v2/guide/components-slots.html #[v-icon(small color="primary") open_in_new]]
  p.
    In the following example, we only count the events which have the custom
    #[span.code leisure] CSS class (orange color).

  v-card.my-2.ma-auto.main-content(style="width: 300px;height: 360px;max-width: 100%")
    vue-cal.vuecal--green-theme.ex--custom-events-count(
      selected-date="2018-11-19"
      xsmall
      :time-from="10 * 60"
      :time-step="2 * 60"
      active-view="month"
      :disable-views="['day']"
      events-count-on-year-view
      :events="events")
      template(v-slot:events-count="{ events, view }")
        span(v-if="customEventsCount(events)") {{ customEventsCount(events) }}

  sshpre(language="html-vue" label="Vue Template").
    &lt;vue-cal selected-date="2018-11-19"
             xsmall
             :time-from="10 * 60"
             :time-step="2 * 60"
             :disable-views="['day']"
             active-view="month"
             events-count-on-year-view
             :events="events"&gt;
        &lt;template v-slot:events-count="{ events, view }"&gt;
          &lt;span v-if="customEventsCount(events)"&gt;
            {{ '\{\{ customEventsCount(events) \}\}' }}
          &lt;/span&gt;
        &lt;/template&gt;
    &lt;/vue-cal&gt;

  p.
    Alternatively, you could also use the #[span.code cell-content] slot
    instead of the #[span.code events-count] slot to perform the same task:#[br]
    (Refer to the next example to know more:
    #[a(href="#ex--custom-title-and-cells" v-scroll-to="'#ex--custom-title-and-cells'") Custom title &amp; cells])
  sshpre.mt-2(language="html-vue" label="Vue Template").
    &lt;template v-slot:cell-content="{ cell, view, events }"&gt;
      &lt;span class="vuecal__cell-date"&gt;{{ '\{\{ cell.content \}\}' }}&lt;/span&gt;
      &lt;span class="vuecal__cell-events-count" v-if="['years', 'year', 'month'].includes(view.id) &amp;&amp; customEventsCount(events)"&gt;
        {{ '\{\{ customEventsCount(events) \}\}' }}
      &lt;/span&gt;
    &lt;/template&gt;

  sshpre(language="js" label="Javascript").
    // In your Vue component.
    methods: {
      customEventsCount: events => {
        return events ? events.filter(e => e.class === 'leisure').length : 0
      }
    }

  sshpre(language="css" label="CSS").
    .vuecal__cell-events-count {background: transparent;}
    .vuecal__cell-events-count span {
      background: #fd9c42;
      height: 100%;
      min-width: 12px;
      padding: 0 3px;
      border-radius: 12px;
      display: block;
    }

  //- Example.
  h4.title
    a(href="#ex--custom-title-and-cells") # Custom title &amp; cells
    a#ex--custom-title-and-cells(name="ex--custom-title-and-cells")
  highlight-message(type="tips").
    Using Vue.js scoped slots, you can override the calendar main date title and calendar cells.#[br]
    If you are not familiar with scoped slots and destructuring slot-scope, you should first read about it:
    #[a(href="https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots" target="_blank") vuejs.org/v2/guide/components-slots.html #[v-icon(small color="primary") open_in_new]]
  h5.mt-6.subtitle-1.font-weight-medium
    v-icon(size="22") keyboard_arrow_right
    | Custom title
  p.ml-2.mb-2.
    2 arguments are available through the scoped slot: #[span.code v-slot:title="{ title, view }"]
  ul
    li
      | #[span.code title], the formatted title (different on all the views). E.g.
      em.ml-2 "Week 2 (January 2019)"
    li
      | #[span.code view], an object containing the active view info.
      sshpre(language="js").mt-2.mb-3.
        {
          id: {String}, // Current view, one of: years, year, month, week, day.
          startDate: {Date}, // JavaScript Date object.
          endDate: {Date}, // JavaScript Date object.
          selectedDate: {Date} // JavaScript Date object.
        }
  p.
    You can use one or the other to format the title as you wish.#[br]
    Using the pre-formatted #[span.code title] will be easy but not very flexible.#[br]
    If you render the date yourself from #[span.code view.startDate], don't forget
    the different formats for all the views: years, year, month, week, day.

  h5.mt-6.subtitle-1.font-weight-medium
    v-icon(size="22") keyboard_arrow_right
    | Custom cells
  p.ml-2.mb-2.
    In this example, only the cell number is clickable on month view.#[br]
    5 arguments are available through the scoped slot:#[br]
    #[span.code v-slot:cell-content="{ cell, view, split, events, goNarrower }"]
  ul
    li #[span.code cell], object containing the cell date.
      sshpre(language="js").mt-2.mb-2.
        {
          content: {String}, // Pre-formatted cell content if any.
          startDate: {Date}, // JavaScript Date object.
          endDate: {Date}, // JavaScript Date object.
          formattedDate: {String}, // formatted start date. E.g. "2019-04-05".
          today: {Boolean}
        }
    li #[span.code view], object containing the active view info.
      sshpre(language="js").mt-2.mb-2.
        {
          id: {String}, // Current view, one of: years, year, month, week, day.
          startDate: {Date}, // JavaScript Date object.
          endDate: {Date}, // JavaScript Date object.
          selectedDate: {Date} // JavaScript Date object.
        }
    li #[span.code split], when splitting days, object containing the current split info.
    li #[span.code events], array containing all the events of the current cell or split.
    li #[span.code goNarrower], function to navigate to narrower view if possible.
  highlight-message.my-3(type="info")
    | By default a cell is rendered as follows.#[br]
    | It is a good idea to reuse the same CSS classes as the different elements have associated styles:#[br]
    sshpre.mt-3.mb-1(language="html-vue").
      &lt;div class="vuecal__flex vuecal__cell-content"&gt;
    sshpre.my-2.ml-5(language="html-vue").
      Now this is the part you can customize:

      &lt;!-- Will be added if splitting days and split labels are set --&gt;
      &lt;div class="split-label" /&gt;
      &lt;!-- Will be added on years, year &amp; month view --&gt;
      &lt;div class="vuecal__cell-date" /&gt;
      &lt;!-- Will be added on month view --&gt;
      &lt;div class="vuecal__cell-events-count" /&gt;
      &lt;!-- Will be added on week and day view if no event --&gt;
      &lt;div class="vuecal__no-event" /&gt;
    sshpre.my-1(language="html-vue").
          &lt;div class="vuecal__cell-events" /&gt;
      &lt;/div&gt;

  v-card.my-2.ma-auto.main-content(style="height: 400px")
    vue-cal.vuecal--green-theme.ex--custom-title-and-cells(
      :time="false"
      :dblclick-to-navigate="false"
      active-view="month"
      :events="events")
      template(v-slot:title="{ title, view }")
        | 🎉&nbsp;
        span(v-if="view.id === 'years'") Years
        span(v-else-if="view.id === 'year'") {{ view.startDate.format('YYYY') }}
        span(v-else-if="view.id === 'month'") {{ view.startDate.format('MMMM YYYY') }}
        span(v-else-if="view.id === 'week'") w{{ view.startDate.getWeek() }} ({{ view.startDate.format('MMM YYYY') }})
        span(v-else-if="view.id === 'day'") {{ view.startDate.format('dddd D MMMM (YYYY)') }}
        | &nbsp;🎉
      template(v-slot:cell-content="{ cell, view, events, goNarrower }")
        span.vuecal__cell-date.clickable(v-if="view.id !== 'day'" :class="view.id" @click="goNarrower") {{ cell.content }}
        .vuecal__cell-events-count(v-if="['years', 'year', 'month'].includes(view.id) && events.length") {{ events.length }}
        .vuecal__no-event(v-if="['week', 'day'].includes(view.id) && !events.length") Nothing here 👌

  sshpre(language="html-vue" label="Vue Template").
    &lt;vue-cal :time="false"
             :dblclick-to-navigate="false"
             active-view="month"
             :events="events"&gt;

      &lt;!-- Custom title --&gt;
      &lt;template v-slot:title="{ title, view }"&gt;
        🎉
        &lt;span v-if="view.id === 'years'"&gt;Years&lt;/span&gt;
        &lt;!-- Using Vue Cal injected Date prototypes --&gt;
        &lt;span v-else-if="view.id === 'year'"&gt;{{ "\{\{ view.startDate.format('YYYY') \}\}" }}&lt;/span&gt;
        &lt;span v-else-if="view.id === 'month'"&gt;{{ "\{\{ view.startDate.format('MMMM YYYY') \}\}" }}&lt;/span&gt;
        &lt;span v-else-if="view.id === 'week'"&gt;w{{ "\{\{ view.startDate.getWeek() \}\} (\{\{ view.startDate.format('MMM YYYY') \}\}" }})&lt;/span&gt;
        &lt;span v-else-if="view.id === 'day'"&gt;{{ "\{\{ view.startDate.format('dddd D MMMM (YYYY)') \}\}" }}&lt;/span&gt;
        🎉
      &lt;/template&gt;

      &lt;!-- Custom cells --&gt;
      &lt;template v-slot:cell-content="{ cell, view, events, goNarrower }"&gt;
        &lt;span class="vuecal__cell-date" :class="view.id" v-if="view.id === 'day'" @click="goNarrower"&gt;
          {{ '\{\{ cell.date.getDate() \}\}' }}
        &lt;/span&gt;
        &lt;span class="vuecal__cell-events-count" v-if="view.id === 'month' &amp;&amp; events.length"&gt;{{ '\{\{ events.length \}\}' }}&lt;/span&gt;
        &lt;span class="vuecal__no-event" v-if="['week', 'day'].includes(view.id) &amp;&amp; !events.length"&gt;Nothing here 👌&lt;/span&gt;
      &lt;/template&gt;

      &lt;!-- Alternatively to custom cells if you just want custom no-event text: --&gt;
      &lt;!-- &lt;template v-slot:no-event&gt;Nothing here 👌&lt;/template&gt; --&gt;
    &lt;/vue-cal&gt;

  //- Example.
  h4.title
    a(href="#ex--custom-event-rendering") # Custom event rendering
    a#ex--custom-event-rendering(name="ex--custom-event-rendering")
  p.mb-2 Using Vue.js scoped slots, you can override the events rendering.

  highlight-message.my-2(type="tips").
    If you are not familiar with scoped slots and destructuring slot-scope, you should first read about it:
    #[a(href="https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots" target="_blank") vuejs.org/v2/guide/components-slots.html #[v-icon(small color="primary") open_in_new]].
  highlight-message.my-3(type="info")
    | By default an event is rendered as follows.#[br]
    | It is a good idea to reuse the same CSS classes as the different elements have associated styles:#[br]
    sshpre.mt-3.mb-1(language="html-vue").
      &lt;div class="vuecal__event"&gt;
          &lt;!-- Will be added if `editable-events` option is set to `true` --&gt;
          &lt;div class="vuecal__event-delete" /&gt;
    sshpre.my-2.ml-5(language="html-vue").
      Now this is the part you can customize:

      &lt;!-- Will be added if a title is set --&gt;
      &lt;div class="vuecal__event-title" /&gt;
      &lt;!-- or if title is set and `editable-events` option is set to `true` --&gt;
      &lt;div class="vuecal__event-title vuecal__event-title--edit" contenteditable /&gt;

      &lt;!-- Will be added if `time` option is set to `true` --&gt;
      &lt;div class="vuecal__event-time" /&gt;

      &lt;!-- Will be added if a content is set --&gt;
      &lt;div class="vuecal__event-content" /&gt;
    sshpre.my-1(language="html-vue").
          &lt;!-- Will be added if `editable-events` option is set to `true` --&gt;
          &lt;div class="vuecal__event-resize-handle" /&gt;
      &lt;/div&gt;
  p.mb-2.
    Two parameters are passed through the scoped slot:
  ul
    li #[span.code event]: The event full object containing dates, time, title, content and custom attributes.
    li #[span.code view]: The current selected view id.
  p.mt-2.
    You can set any custom attribute you want on an event, they will then be accessible in your custom event renderer!#[br]
    Note that #[span.code _eid] is a reserved keyword.

  v-card.my-2.ma-auto.main-content(style="height: 520px")
    vue-cal.vuecal--green-theme.ex--custom-event-rendering(
      selected-date="2018-11-19"
      :time-from="9 * 60"
      :time-to="19 * 60"
      hide-weekends
      :events="eventsToPop")
      template(v-slot:event="{ event, view }")
        v-icon.mt-2(color="white" x-large) {{ event.icon }}
        .vuecal__event-title.mb-6(v-html="event.title")
        small.vuecal__event-time
          strong.mr-1 Event start:
          span {{ event.start.formatTime('h O\'clock') }}
          br
          strong.mr-1 Event end:
          span {{ event.end.formatTime('h O\'clock') }}
  sshpre(language="html-vue" label="Vue Template").
    &lt;vue-cal selected-date="2018-11-19"
             :time-from="9 * 60"
             :time-to="19 * 60"
             hide-weekends
             :events="events"&gt;
      &lt;template v-slot:event="{ event, view }"&gt;
        &lt;v-icon&gt;{{ '\{\{ event.icon \}\}' }}&lt;/v-icon&gt;

        &lt;div class="vuecal__event-title" v-html="event.title" /&gt;
        &lt;!-- Or if your events are editable: --&gt;
        &lt;div class="vuecal__event-title vuecal__event-title--edit"
             contenteditable
             @blur="event.title = $event.target.innerHTML"
             v-html="event.title" /&gt;

        &lt;small class="vuecal__event-time"&gt;
          &lt;!-- Using Vue Cal injected Date prototypes --&gt;
          &lt;strong&gt;Event start:&lt;/strong&gt; &lt;span&gt;{{ '\{\{ event.start.formatTime("h O\'clock") \}\}' }}&lt;/span&gt;&lt;br/&gt;
          &lt;strong&gt;Event end:&lt;/strong&gt; &lt;span&gt;{{ '\{\{ event.end.formatTime("h O\'clock") \}\}' }}&lt;/span&gt;
        &lt;/small&gt;
      &lt;/template&gt;
    &lt;/vue-cal&gt;

  sshpre(language="js" label="Javascript").
    events: [
      {
        start: '2018-11-20 14:00',
        end: '2018-11-20 18:00',
        title: 'Need to go shopping',
        icon: 'shopping_cart', // Custom attribute.
        class: 'leisure'
      },
      {
        start: '2018-11-22 10:00',
        end: '2018-11-22 15:00',
        title: 'Golf with John',
        icon: 'golf_course', // Custom attribute.
        class: 'sport'
      }
    ]

  //- API
  h2.headline.mt-12.pt-12
    a(href="#api") API
    a#api(name="api")
  p Here is the list of all the available views.
  sshpre.mt-2(language="js").
    ['years', 'year', 'month', 'week', 'day']
  p.
    Here is the list of all the parameters available and their decription bellow this table.#[br]
    Don't forget that in HTML the #[span.code camelCase] is not correct and you should use
    the #[span.code kebab-case].
  sshpre.mt-2(language="js").
    activeView:             [String],          default: 'week'
    cellClickHold:          [Boolean],         default: true
    clickToNavigate:        [Boolean],         default: false
    dblclickToNavigate:     [Boolean],         default: true
    disableDatePrototypes:  [Boolean],         default: false
    disableViews:           [Array],           default: []
    editableEvents:         [Boolean, Object], default: false
    events:                 [Array],           default: []
    eventsCountOnYearView:  [Boolean],         default: false
    eventsOnMonthView:      [Boolean, String], default: false
    hideBody:               [Boolean],         default: false
    hideTitleBar:           [Boolean],         default: false
    hideViewSelector:       [Boolean],         default: false
    hideWeekdays:           [Array],           default: []
    hideWeekends:           [Boolean],         default: false
    locale:                 [String],          default: 'en'
    maxDate:                [String, Date],    default: ''
    minCellWidth:           [Number],          default: 0 // In pixels.
    minDate:                [String, Date],    default: ''
    minEventWidth:          [Number],          default: 0 // In percent.
    minSplitWidth:          [Number],          default: 0 // In pixels.
    onEventClick:           [Function],        default: null
    onEventCreate:          [Function],        default: null
    onEventDblclick:        [Function],        default: null
    overlapsPerTimeStep:    [Boolean],         default: false
    resizeX:                [Boolean],         default: false
    selectedDate:           [String, Date],    default: ''
    showAllDayEvents:       [Boolean, String], default: false
    showWeekNumbers:        [Boolean, String], default: false
    small:                  [Boolean],         default: false
    snapToTime:             [Number],          default: null
    specialHours:           [Object],          default: {}
    splitDays:              [Array],           default: []
    startWeekOnSunday:      [Boolean],         default: false
    stickySplitLabels:      [Boolean],         default: false
    time:                   [Boolean],         default: true
    timeCellHeight:         [Number],          default: 40 // In pixels.
    timeFormat:             [String],          default: ''
    timeFrom:               [Number],          default: 0 // In minutes.
    timeStep:               [Number],          default: 30 // In minutes.
    timeTo:                 [Number],          default: 24 * 60 // In minutes.
    todayButton:            [Boolean],         default: false
    transitions:            [Boolean],         default: true
    twelveHour:             [Boolean],         default: false
    xsmall:                 [Boolean],         default: false
    watchRealTime:          [Boolean],         default: false

  ul.pl-0.api-options
    li
      code.mr-2 locale
      span.code [String], default: 'en'
      p.
        Allows you to translate the calendar texts in a given language.#[br]
        Use a 2 letter locale code
        (#[a(href="https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes" target="_blank") ISO 639-1])
        unless a distinction is needed. E.g. #[span.code 'pt-br'] for Portuguese-Brasilian.
      highlight-message(type="info")
        | Currently available languages are {{ localesList.map(l => l.label).join(', ') }}.#[br]
        | If you are interested in providing a language support please do a pull request with a json file into the i18n directory.#[br]
        | this is what a language json looks like.

        sshpre.my-2(language="json").
          {
            "weekDays": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
            "months": ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
            "years": "Years",
            "year": "Year",
            "month": "Month",
            "week": "Week",
            "day": "Day",
            "today": "Today",
            "noEvent": "No Event",
            "allDay": "All day",
            "deleteEvent": "Delete",
            "createEvent": "Create an event",
            "dateFormat": "dddd D MMMM YYYY"
          }
        p.
          Regarding the #[span.code dateFormat] translation, this is the format of the full
          date you can see in a single day view title.#[br]
          #[span.code dddd] stands for the full-letter day of week, #[span.code MMMM] stands for
          full-letter month, #[span.code D] stands for the date of the month (0-31),
          #[span.code YYYY] stands for full year, #[span.code {S}] stands for st/nd/rd/th and only in English.

      highlight-message(type="tips").
        Note that 2 media queries will shorten the days of the week to 3 letters then 1 letter when it does not fit.#[br]
        You can read more about it in the # Responsiveness &amp; Media Queries section in the #[a(href="#css-notes") CSS Notes].
    li
      code.mr-2 hideViewSelector
      span.code [Boolean], default: false
      p.
        When set to #[span.code true], the top view selector will disappear.#[br]
        You can still navigate from a view to another by clicking a cell (narrower view) or
        the view title (broader view).
    li
      code.mr-2 hideTitleBar
      span.code [Boolean], default: false
      p.
        When set to #[span.code true], the title bar with navigating arrows will disappear.#[br]
        You can still navigate from a view to another with the view selector and clicking
        a cell (narrower view).
    li
      code.mr-2 hideBody
      span.code [Boolean], default: false
      p.
        When set to #[span.code true], the whole calendar body will disappear - cells and timeline.#[br]
        Also means that all the logic usually triggered from the calendar's body won't run at all.
    li
      code.mr-2 hideWeekends
      span.code [Boolean], default: false
      p.
        Hide the weekend and shows only Monday to Friday on month view and week view.#[br]
        The weekend are still visible in day view not to break the behavior of the arrows.#[br]
        Note that by hiding the arrows you won't be able to see a weekend day in day view if hideWeekends is true.
    li
      code.mr-2 hideWeekdays
      span.code [Array], default: []
      p.
        Hide particular days of the week. This option accepts an array of days (day numbers) to hide,
        #[strong starting at #[span.code 1] for Monday, to #[span.code 7] for Sunday].#[br]
        This option will apply on month &amp; week views.#[br]#[br]
        If you want to hide Saturday and Sunday you can put #[span.code 6, 7] in the array or use
        #[span.code hideWeekends] in supplement of #[span.code hideWeekdays].
    li
      code.mr-2 disableViews
      span.code [Array], default: []
      p.
        Allows you to totally disable one or more of the available views.#[br]
        Accepted view names are 'years', 'year', 'month', 'week', 'day'.#[br]
        Note that the navigation between views via cells click or title click won't
        break and will only navigate to views you have allowed.
    li
      code.mr-2 activeView
      span.code [String], default: 'week'
      p.
        Allows you to set a default active view, for the first time you load the calendar.#[br]
        Then control the active view from outside of Vue Cal.#[br]
        Accepts one of 'years', 'year', 'month', 'week', 'day'.
    li
      code.mr-2 todayButton
      span.code [Boolean], default: false
      p Adds a Today button in the title bar to quickly go to Today's date.#[br]
    li
      code.mr-2 showAllDayEvents
      span.code [Boolean, String], default: false
      ul
        li.mb-2.
          When the #[span.code showAllDayEvents] is set to #[span.code true] the events with an
          #[span.code allDay] attribute set to #[span.code true] will be displayed in a fixed top
          bar on the #[span.code week] &amp; #[span.code day] views.#[br]
          The all day events bar will only show up if the options #[span.code showAllDayEvents] &amp;
          #[span.code time] are set to #[span.code true].#[br]
          #[span.code time] is important since without time information every event is an all-day
          event there is no point in separating them then.
        li.mb-2.
          When #[span.code showAllDayEvents] is set to #[span.code false], all the all day events
          (#[span.code allDay] attribute set to #[span.code true]), will show up as a normal
          background event.
        li.mb-2.
          On month view, switching #[span.code showAllDayEvents] on and off will not have any impact
          since both should display the all day events.
        li.mb-2.
          #[span.code showAllDayEvents] accepts a #[span.code Boolean] or the string
          #[span.code 'short'], to display only the event title.
    li
      code.mr-2 showWeekNumbers
      span.code [Boolean], default: false
      p.
        When set to #[span.code true], the weeks numbers will show in the first column on the #[span.code month] view (only).#[br]
        You can also provide a custom renderer to the weeks numbers cells through the #[span.code week-number-cell] slot.
      highlight-message
        a#there-can-be-53-weeks-in-a-year(name="there-can-be-53-weeks-in-a-year")
        Strong Did you know there can be 53 weeks in the year?#[br]
        | This happens every time the year starts a Thursday, or starts a Wednesday of a leap year. In this case the week number will be 53 instead of 1.
    li
      code.mr-2 selectedDate
      span.code [String, Date], default: ''
      p.
        Accepts a formatted string or plain JS Date object.#[br]
        Set a selected date, for the first time you load the calendar.#[br]
        This day will be highlighted and the first view will naturally show this date.#[br]
        E.g. setting a date in year 2000 with a activeView of week, will show you that week of year 2000.#[br]#[br]
        Updating the #[span.code selectedDate] programmatically after the first calendar load,
        will update the view if needed to show this date.#[br]Refer to the #[a(href="#ex--sync-two-calendars") Sync two vue-cal instances] example.
      highlight-message(type="warning").
        A correct string date format is #[code {{ currentDateFormatted }}] or
        #[code="{{ currentDateFormatted.split(' ')[0] }}"] if you don't need the time.
        Only these formats will work as a string. You can also provide a native Javascript Date object.
    li
      code.mr-2 minDate
      span.code [String, Date], default: ''
      p.
        Accepts a formatted string or plain JS Date object.#[br]
        Set a minimum date for the cells to be selectable.#[br]
        By default the cell will be grayed out when out of range but CSS classes let you customize this.
    li
      code.mr-2 maxDate
      span.code [String, Date], default: ''
      p.
        Accepts a formatted string or plain JS Date object.#[br]
        Set a maximum date for the cells to be selectable.#[br]
        By default the cell will be grayed out when out of range but CSS classes let you
        customize this.
    li
      code.mr-2 specialHours
      span.code [Object], default: {}
      p
        | Allows an individual highlighted time range for each day of the week.#[br]
        | For instance, it could represent the business hours.#[br]
        | The object must contain indexed days, #[strong from 1 for Monday to 7 for Sunday], of the
        | days you want to highlight.#[br]
        | Each day must contain an object with a #[span.code from] and #[span.code to] properties
        | defining the beginning and the end of the time range #[strong in minutes].#[br]
        | In addition, you can optionally set a CSS class for each day of the week.#[br]
        | Example for Wednesday:
        sshpre.mt-1(language="html-vue" label="Vue Template").
          :special-hours="{ 3: { from: 8 * 60, to: 20 * 60, class: 'open' } }"

    li
      code.mr-2 startWeekOnSunday
      span.code [Boolean], default: false
      p.
        By default weeks start on Monday but with this option you can start the week on Sunday.
    li
      code.mr-2 small
      span.code [Boolean], default: false
      p.
        When set to #[span.code true], the days of the week headings will be truncated to 3 letters.#[br]
        Does not apply to the title of the day view.#[br]
        2 media queries are truncating the days of the week bellow 450px,
        read on in the #[a(href="#css-notes") CSS Notes].
    li
      code.mr-2 xsmall
      span.code [Boolean], default: false
      p.
        When set to #[span.code true], the days of the week headings will be truncated to 1 letter.#[br]
        Does not apply to the title of the day view.#[br]
        In Addition, the whole calendar gets applied a smaller font size of 0.9em,
        and the current view title is also reduced.#[br]
        2 media queries are truncating the days of the week bellow 450px,
        read on in the #[a(href="#css-notes") CSS Notes].
    li
      code.mr-2 transitions
      span.code [Boolean], default: true
      p Enable / disable the CSS transitions between all the views and view states.
    li
      code.mr-2 clickToNavigate
      span.code [Boolean], default: false
      p.
        When set to #[span.code true] a single click (or tap for touch devices) will take you to a
        narrower view if available.#[br]
        You can always go back to a broader view by clicking the view title or selecting another view
        from the view selector if enabled.#[br]
        The navigation to narrower view can be disabled by setting both #[span.code clickToNavigate]
        and #[span.code dblclickToNavigate] to false.
    li
      code.mr-2 dblclickToNavigate
      span.code [Boolean], default: true
      p.
        When set to #[span.code true] a double click (or double tap for touch devices) will take you to a
        narrower view if available.#[br]
        You can always go back to a broader view by clicking the view title or selecting another view
        from the view selector if enabled.#[br]
        The navigation to narrower view can be disabled by setting both #[span.code clickToNavigate]
        and #[span.code dblclickToNavigate] to false.
    li
      code.mr-2 cellClickHold
      span.code [Boolean], default: true
      p.
        Allows you to disable the default event creation on cell click &amp; hold which only
        happens if #[span.code editableEvents.create] is set to #[span.code true].
    li
      code.mr-2 time
      span.code [Boolean], default: true
      p.
        Whether you want to display the timeline and handle events with time or only date.#[br]
        Note that time is made of #[span.code hours:minutes] #[strong.ml-2 and no second].
    li
      code.mr-2 timeFrom
      span.code [Number], default: 0
      p.
        If #[span.code time] is enabled, set the start of the timeline in minutes.
        By default it starts at midnight.
    li
      code.mr-2 timeTo
      span.code [Number], default: 24 * 60
      p.
        If #[span.code time] is enabled, set the end of the timeline in minutes.
        By default it ends at 24:00.
    li
      code.mr-2 timeStep
      span.code [Number], default: 30
      p.
        If #[span.code time] is enabled, set the time increment in minutes.
    li
      code.mr-2 timeCellHeight
      span.code [Number], default: 40
      p.
        If #[span.code time] is enabled, set the time cell height in pixels.#[br]
        this is very important as it is used to calculate the events position in the day.
    li
      code.mr-2 twelveHour
      span.code [Boolean], default: false
      p.
        If #[span.code time] is enabled, the default time format is 24 hour.#[br]
        With #[span.code twelveHour] set to #[span.code true] (use #[span.code twelve-hour] in template),
        the time format will show 12 hours suffixed with am/pm.
    li
      a(id="time-format" name="time-format")
      code.mr-2 timeFormat
      span.code [String], default: ''
      p.mb-2.
        When defined, overrides the default time format in time cells and events.#[br]
        Formatted time can contain any character but the following characters will be replaced:
      ul.ml-3
        li #[strong.code H]: Hours no leading zero, 24-hour format
        li #[strong.code HH]: Hours with leading zero, 24-hour format
        li #[strong.code h]: Hours no leading zero, 12-hour format
        li #[strong.code hh]: Hours with leading zero, 12-hour format
        li #[strong.code m]: Minutes no leading zero
        li #[strong.code mm]: Minutes with leading zero
        li #[strong.code {am}]: am or pm
        li.
          The characters `#[strong.code {]` and `#[strong.code }]` are removed and used only to
          delimit keywords when there is no space.#[br]
          E.g. #[span.code "h:mm{am}"].
    li
      code.mr-2 watchRealTime
      span.code [Boolean], default: false
      p.
        When set to #[span.code true], the current time line in today's cell, on #[span.code week] and
        #[span.code day] views, will stay in sync with real time.#[br]
        #[span.grey--text (This requires a #[span.code setTimeout] every minute)]
    li
      code.mr-2 minEventWidth
      span.code [Number], default: 0
      p.
        When a number is set, in percent, each event within a cell will have a minimum width.#[br]
        If the provided percentage is bigger than what it would naturally be, the events will partially overlap.
    li
      code.mr-2 overlapsPerTimeStep
      span.code [Boolean], default: false
      p.
        When set to #[span.code true], each event of the same cell will have a width of
        #[span.code 100% / [number of simultaneous events]] only if these events are within the same time step.#[br]
        Refere to #[a(href="https://github.com/antoniandre/vue-cal/pull/182" target="_blank") this use case].
    li
      code.mr-2 minCellWidth
      span.code [Number], default: 0
      p.
        When a number is set, in pixels, each cell #[strong of the #[span.code week] view (only)]
        will have this minimum width.#[br]
        If it does not fit in the calendar body, the overflow will be scrollable.
        If #[span.code minSplitWidth] is also set, it will override #[span.code minCellWidth].
    li
      code.mr-2 minSplitWidth
      span.code [Number], default: 0
      p.
        This is for day splits only, and it applies to the
        #[strong #[span.code week] and #[span.code day] views (only)].#[br]
        When a number is set, in pixels, each split of each cell will have this minimum width.#[br]
        If it does not fit in the calendar body, the overflow will be scrollable.#[br]
        If #[span.code minCellWidth] is also set, #[span.code minSplitWidth] will override it on
        #[span.code week] view.
    li
      code.mr-2 splitDays
      span.code [Array], default: []
      p
        | Split each day into multiple vertical splits.#[br]
        | Accepts an array of split objects with attributes.#[br]
        | Each split object can have these attributes, they are all optional:
        sshpre(language="js").
          {
            id: {Integer | String}, // All ids must be set if using `hide`.
            class: {String},
            label: {String},
            hide: {Boolean} // You can toggle the column on and of with this.
          }
    li
      code.mr-2 stickySplitLabels
      span.code [Boolean], default: false
      p.
        When set to #[span.code true], the day splits labels will be displayed in the header
        instead of in-cell.
    li
      code.mr-2 editableEvents
      span.code [Boolean, Object], default: false
      p
        | When #[span.code editableEvents] is set to #[span.code true], it allows:
        ul
          li Dragging and dropping events
          li Resizing events by dragging the handle showing at the bottom of each event if #[span.code time] is set to #[span.code true],
          li Deleting events by click and hold an event.
          li Editing events title
      highlight-message
        ul
          li
            | You can set more accurately which edition you want to allow by passing an object.#[br]
            | For instance, this object will allow all the above editions except the drag &amp; drop:
            div.code.black--text { title: true, drag: false, resize: true, delete: true, create: true }
          li.
            You can still force an event to be undeletable or unresizable from the #[span.code deletable] &amp; #[span.code resizable] event attributes.
    li
      code.mr-2 resizeX
      span.code [Boolean], default: false
      p.
        When set to #[span.code true], allows resizing an event across multiple days.#[br]
        Resizing on the X axis is only available on #[span.code week] view.
    li
      code.mr-2 snapToTime
      span.code [Number], default: 0
      p.
        Accepts a number of minutes from 0 to 60 to snap a dropped event or an event end time while resizing.#[br]
        For instance, if you set a #[span.code snapToTime] of 15 min, dropping the event at a start of 10:05,
        it will snap to 10:00, and if you drop it at 10:11 it will snap to 10:15.
    li
      code.mr-2 eventsOnMonthView
      span.code [Boolean, String], default: false
      p.
        When set to #[span.code true], the events will also be displayed on month view
        (including events from visible out of scope days).#[br]
        When set to the string '#[span.code short]', only the event's title will be displayed.
    li
      code.mr-2 eventsCountOnYearView
      span.code [Boolean], default: false
      p.
        When set to #[span.code true], the events count will also be displayed on #[span.code years]
        &amp; #[span.code year] views.
    li
      code.mr-2 onEventClick
      span.code [Function], default: null
      p.
        A callback function to execute when an event is clicked.#[br]
        this function receives 2 parameters: #[span.code event], the clicked calendar event,
        and #[span.code e], the associated JavaScript DOM event.
    li
      code.mr-2 onEventDblclick
      span.code [Function], default: null
      p.
        A callback function to execute when an event is double clicked.#[br]
        this function receives 2 parameters: #[span.code event], the double clicked calendar event,
        and #[span.code e], the associated JavaScript DOM event.
    li
      code.mr-2 onEventCreate
      span.code [Function], default: null
      p.
        A callback function to execute when an event is created.#[br]
        This function receives 2 parameters: #[span.code event], the created event,
        and #[span.code deleteEvent], a function to delete the created event.#[br]
        You can modify and override the received #[span.code event] and return it to vue-cal.#[br]
        If this function returns #[span.code false], the event creation will be cancelled.
    li
      code.mr-2 events
      span.code [Array], default: []
      p.
        Allows you to place events in the calendar.#[br]
        Accepts an array of event objects.#[br]
        This is what an event object must look like:
      p
        sshpre.mt-2(language="js").
          {
            start: '2018-11-19 12:00', // Required.
            end: '2018-11-19 14:00', // Required.
            // Instead of formatted dates, you can also provide Javascript Date objects:
            // start: new Date(2018, 11 - 1, 19, 12, 0),
            // end: new Date(2018, 11 - 1, 19, 14, 0),
            title: {String}, // Optional.
            content: {String}, // Optional.
            class: {String}, // Optional - space-separated css classes.
            background: {Boolean} // Optional. (Event type not CSS property)
            split: {Number|String} // Optional.
            allDay: {Boolean} // Optional.
            deletable: false // optional - force undeletable when events are editable.
            resizable: false // optional - force unresizable when events are editable.
          }
        ul
          li If no #[span.code title] is provided, no title will be displayed.
          li.
            #[span.code content] accepts free HTML, for instance:
            '&lt;i class="v-icon material-icons"&gt;local_hospital&lt;/i&gt;'.#[br]
            If no #[span.code content] is provided, no content will be displayed.
          li.
            You may need an event CSS #[span.code class] to handle different event types
            for instance. With different classes you can apply different styles to the events.#[br]
            E.g. backgrounds, images, borders, etc.
          li.
            The #[span.code background] attribute sets an event as a background event,
            which allows overlapping and disable the ability to drag &amp; resize.
          li.
            When using #[span.code splitDays], the #[span.code split] attribute accepts a number,
            starting from 1, corresponding to the split you want the event to appear in.#[br]
            Optionally, if you have set the #[span.code id] property in #[span.code splitDays],
            you have to use the same #[span.code id] here (Integer or String).
          li.
            When the #[span.code showAllDayEvents] and #[span.code time] options are set to
            #[span.code true], all the events with an attribute #[span.code allDay] set to
            #[span.code true] will show up in a fixed bar (week &amp; day views).

      highlight-message(type="warning")
        p.title.mt-0.ml-1 Important notes
        ul
          li.
            The events are internally identified by the key #[span.code `_eid`].
            #[strong This is a reserved keyword.]
          li.mt-2
            | Correct date formats are #[code {{ currentDateFormatted }}],
            | or #[code="{{ currentDateFormatted.split(' ')[0] }}"] if you don't want any time in the whole calendar,
            | or a JavaScript #[code Date] object. Only these formats will work.#[br]
            strong.
              You can't mix events with time and events without, and you can only remove time if the #[span.code time]
              option is set to #[span.code false].
          li.mt-2.
            You can set an event end at #[span.code 24:00] or #[span.code 00:00] (for the next midnight),
            #[strong but internally the date will be set at #[span.code 23:59:59]] so the date stays the same instead
            of natural behavior of taking the next day at #[span.code 00:00:00].#[br]
            When returned from emitted events, this event #[span.code end] will contain a date ending at #[span.code 23:59:59].
    li
      code.mr-2 disableDatePrototypes
      span.code [Boolean], default: false
      p.
        If you really don't want the Date prototypes to be added, you can disable them with this option.#[br]
        Refer to #[a(href="https://github.com/antoniandre/vue-cal/issues/259" target="_blank" style="text-decoration: underline;color: inherit") This Vue Cal issue on Github].

  h2.headline.mt-12.pt-12
    a(href="#date-prototypes") #[strong.code Date] Prototypes
    a#date-prototypes(name="date-prototypes")
  p
    | Vue Cal has no dependency and performs date operations through a few notable useful and efficient functions that
    | have been added to the native #[span.code Date] class for your convenience.#[br]
    strong.mr-2.
      With this set of functions, you will most likely not need #[em Moment.js] or any other additional Date library!#[br]#[br]
      Once Vue Cal is loaded, you can access the following functions from anywhere in your code
      just like a simple #[span.code Date] function.
    | E.g. #[span.code (new Date()).addDays(2)]

  ul
    li.mt-3
      code.mr-2 .addDays(days)
      | Adds days to a Date object and returns it. The original Date stays untouched as a copy is made.#[br]
      | `#[span.code days]` is an integer.
    li.mt-3
      code.mr-2 .subtractDays(days)
      | Subtracts days to a Date object and returns it. The original Date stays untouched as a copy is made.#[br]
      | `#[span.code days]` is an integer.
    li.mt-3
      code.mr-2 .addHours(hours)
      | Adds hours to a Date object and returns it. The original Date stays untouched as a copy is made.#[br]
      | `#[span.code hours]` is an integer.
    li.mt-3
      code.mr-2 .subtractHours(hours)
      | Subtracts hours to a Date object and returns it. The original Date stays untouched as a copy is made.#[br]
      | `#[span.code hours]` is an integer.
    li.mt-3
      code.mr-2 .addMinutes(minutes)
      | Adds minutes to a Date object and returns it. The original Date stays untouched as a copy is made.#[br]
      | `#[span.code minutes]` is an integer.
    li.mt-3
      code.mr-2 .subtractMinutes(minutes)
      | Subtracts minutes to a Date object and returns it. The original Date stays untouched as a copy is made.#[br]
      | `#[span.code minutes]` is an integer.
    li.mt-3
      code.mr-2 .getWeek()
      | Returns the week number (1 #[a(href="#there-can-be-53-weeks-in-a-year") to 53]) of a date.
    li.mt-3
      code.mr-2 .isToday()
      | Returns #[span.code true] if the date is Today.
    li.mt-3
      code.mr-2 .isLeapYear()
      | Returns #[span.code true] if the date is in a leap year.

  h3.mt-4 And because everyone needs a Date/time formatting function...
  p.
    It is now available directly from the Date object, with your loaded locale!

  ul
    li.mt-3
      code.mr-2 .format(format)
      div.
        Returns a formatted date string.
        Default format is #[span.code 'YYYY-MM-DD'], but you can use any formatting keyword from
        this list, and add any character not present in this mapping:
      ul
        li #[strong.code.black--text YYYY]: full year. #[span.grey--text.ml-2 E.g. `2019`]
        li #[strong.code.black--text YY]: 2 last digits of the year. #[span.grey--text.ml-2 E.g. `19`]
        li #[strong.code.black--text MMMM]: month in full. #[span.grey--text.ml-2 E.g. `January`]
        li #[strong.code.black--text MMM]: 3 first letters of the month. #[span.grey--text.ml-2 E.g. `Jan`]
        li #[strong.code.black--text MM]: month number with leading zero. (01-12) #[span.grey--text.ml-2 E.g. `01`]
        li #[strong.code.black--text M]: month number without leading zero. (1-12) #[span.grey--text.ml-2 E.g. `1`]
        li #[strong.code.black--text DD]: date of the month with leading zero. (01-31) #[span.grey--text.ml-2 E.g. `01`]
        li #[strong.code.black--text D]: date of the month without leading zero. (1-31) #[span.grey--text.ml-2 E.g. `1`]
        li.
          #[strong.code.black--text S]: (usually with surrounding #[span.code `{ }`]) only in English,
          will output #[span.code `st`], #[span.code `nd`], #[span.code `rd`] or #[span.code `th`].
        li #[strong.code.black--text dddd]: day of the week in full. #[span.grey--text.ml-2 E.g. `Monday`]
        li #[strong.code.black--text ddd]: 3 first letters of the day of the week. #[span.grey--text.ml-2 E.g. `Mon`]
        li #[strong.code.black--text dd]: first letter of the day of the week. #[span.grey--text.ml-2 E.g. `M`]
        li #[strong.code.black--text d]: number of the day of the week. (1-7) #[span.grey--text.ml-2 E.g. `1` for Monday]
        li #[strong.black--text And also all the keywords from the following #[span.code formatTime()] function.]

    li.mt-3
      code.mr-2 .formatTime(format)
      div.
        Returns a formatted time string.#[br]
        The #[span.code format()] function can also do this, but this might be a shortcut if you just want
        the default time formatting.#[br]
        E.g. `#[span.code formatTime()]`).#[br]
        This function will also be slightly faster than #[span.code format()] as lighter in functionality.#[br]
        Default format is #[span.code 'HH:mm'], but you can use any formatting keyword from
        this list, and add any character not present in this mapping:
      ul
        li #[strong.code.black--text HH]: Hours with leading zero, 24-hour format. (00-24)#[span.grey--text.ml-2 E.g. `20`]
        li #[strong.code.black--text H]: Hours without leading zero, 24-hour format. (0-24)#[span.grey--text.ml-2 E.g. `20`]
        li #[strong.code.black--text hh]: Hours with leading zero, 12-hour format. #[span.grey--text.ml-2 E.g. `08`]
        li #[strong.code.black--text h]: Hours without leading zero, 12-hour format. #[span.grey--text.ml-2 E.g. `8`]
        li #[strong.code.black--text mm]: Minutes with leading zero. #[span.grey--text.ml-2 E.g. `08`]
        li #[strong.code.black--text m]: Minutes without leading zero. #[span.grey--text.ml-2 E.g. `8`]
        li #[strong.code.black--text am]: (usually with surrounding #[span.code `{ }`]) am or pm (also localized if any)

  highlight-message.my-4(type="tips")
    ul
      li.
        To separate 2 keywords or a keyword and another text not from this list without adding spaces or
        any separation, you can use the delimiters #[span.code `{ }`].#[br]
        For instance #[span.code `new Date().format('YYYY{MM}DD')`] (or even #[span.code `{YYYY}{MM}{DD}`]) will produce:
        "#[span.code {{ nowFormatted }}]".
      li.mt-4.
        The Date functions are added when Vue Cal loads, you can always check if you have it before you use it:#[br]
        #[span.code Date.prototype.format &amp;&amp; new Date().format()]
      li.mt-4.
        If you really don't want the Date prototypes to be added, you can disable them with this option:
        #[span.code disable-date-prototypes].#[br]
        Refer to #[a(href="https://github.com/antoniandre/vue-cal/issues/259" target="_blank" style="text-decoration: underline;color: inherit") This Vue Cal issue on Github].

  h2.headline.mt-12.pt-12
    a(href="#css-notes") CSS Notes
    a#css-notes(name="css-notes")
  p You can easily change the calendar design with CSS.

  h3.mt-12 # Color themes &amp; rounded theme
  p.
    Currently 2 color themes (green &amp; blue) are available, in addition to the standard grey theme.#[br]
    You can apply a green or blue theme by using the CSS class #[span.code vuecal--green-theme]
    or #[span.code vuecal--blue-theme].
  p.
    If you want another color theme, you can define your own easily.#[br]
    This is what a standard color theme looks like.
    You can copy and change any color to quickly get a nice render.#[br]
    If that is still not doing what you want you can change even more in your own CSS.

  sshpre(language="css" label="CSS").
    /* Green-theme. */
    .vuecal__menu, .vuecal__cell-events-count {background-color: #42b983;}
    .vuecal__title-bar {background-color: #e4f5ef;}
    .vuecal__cell--today, .vuecal__cell--current {background-color: rgba(240, 240, 255, 0.4);}
    .vuecal:not(.vuecal--day-view) .vuecal__cell--selected {background-color: rgba(235, 255, 245, 0.4);}
    .vuecal__cell--selected:before {border-color: rgba(66, 185, 131, 0.5);}
    /* Cells and buttons get highlighted when an event is dragged over it. */
    .vuecal__cell--highlighted:not(.vuecal__cell--has-splits),
    .vuecal__cell-split--highlighted {background-color: rgba(195, 255, 225, 0.5);}
    .vuecal__arrow.vuecal__arrow--highlighted,
    .vuecal__view-btn.vuecal__view-btn--highlighted {background-color: rgba(136, 236, 191, 0.25);}

  p
    strong Rounded theme#[br]
    | You can use the rounded cells theme like in the Example
    | #[a(href="#ex--calendar-themes") Calendar themes - Rounded cells],
    | by applying the CSS class #[span.code vuecal--rounded-theme] to the Vue Cal wrapper.

  h3.mt-12 # Responsiveness &amp; media queries
  p.
    This calendar is fully responsive.#[br]
    To help you in making the calendar always look perfect,
    2 media queries (to keep it simple) are in place for small screens.#[br]
    The media queries operate downward from 550px &amp; 450px, to truncate the text
    of the days of the week from full day name to 3 letters and to 1 letter according to the available space.#[br]#[br]

    If this is not enough for your particular use, you can add your own in your CSS.#[br]
    Additionally, you can use the options #[span.code small] &amp; #[span.code xsmall]
    to truncate week days at any size.

  h3.mt-12 # Disabled text selection
  p.
    Notice that on Windows machines, and on devices where the scrollbar takes some space and
    pushes the calendar main content (#[span.code week] and #[span.code day] views), the
    weekdays headings and the all-day bar get an added padding right to align well with the main content.#[br]
    This is done once, in the #[span.code mounted] hook.

  h3.mt-12 # Disabled text selection
  p.
    By default the selection is disabled in the whole calendar except in the events.
    you can override this by CSS.

  //- Release notes.
  h2.headline.mt-12.pt-12.mb-4
    a(href="#release-notes") Release notes
    a#release-notes(name="release-notes")

  div
    strong.mr-2 Version 3.2
    | The new two way binding #[span.code active-view] prop replaces the #[span.code default-view] prop.#[br]
    | Refer to the #[a(href="#ex--external-controls") external controls] example.
  div.mt-2.grey--text #[strong Version 3.1.1] Allow disabling event #[span.code titleEditable] individually
  div
    strong Version 3.1.0
    highlight-message(type="warning").
      The event properties #[span.code startDate] and #[span.code endDate] have been merged into
      #[span.code start] and #[span.code end] which now accept both a String and a Javascript Date.#[br]
      #[strong Vue Cal always returns the Date object and not the string, even if you defined it as a string],
      but Vue Cal offers Date prototype functions to easily format the date how you want.
    ul
      li Fixed multiple day events resizing on x and y axis.
      li Allow disabling Date prototypes
      li Emit an #[span.code event-resizing] repeatedly while resizing an event
  div.mt-4
    strong Version 3.0
    h3.mt-0.pt-0 The arrival of the drag &amp; drop feature marks a new milestone for Vue Cal!
    p.mb-0.
      Many subsequent features to come, progressively building the most intuitive full-featured and flexible calendar
      on Vue.js, 100% designed for Vue, and still no dependency!
    highlight-message.mb-0(type="warning")
      h3.mt-0.pt-0.
        Like the native HTML5 drag &amp; drop it's built with, Vue Cal's drag &amp; drop is not
        available on touch screens
      p.mb-0 Vue Cal will support touch screen drag &amp; drop later on, using an alternative technology.

    highlight-message.mb-6(type="success")
      h3.mt-0.pt-0 New Features
      ul
        li
          h4.mt-2.pt-0 Events drag &amp; drop
          p.
            Drag &amp; drop is a module (to keep Vue Cal light weight) and must be loaded
            separately: #[br]#[span.code import 'vue-cal/dist/drag-and-drop.js']

        li
          h4.mt-0 Drop an external (HTML5 draggable) event into Vue Cal or between 2 Vue Cal instances
        li
          h4.mt-0 #[span.code snapToTime] option on event drop and event resize
          p Refer to the #[span.code snapToTime] option in the #[a(href="#api") API section].
        li
          h4.mt-0 The #[span.code editableEvents] option now also accept an object to precisely allow specific edition
          p Refer to the #[span.code editableEvents] option in the #[a(href="#api") API section].
      h3.mt-0.mb-2 Big changes
      ul
        li.error--text
          strong In the coming version 3.1:
          p.
            Now that Vue Cal has Date prototypes and it is so easy to format a date,
            the event properties #[span.code startDate] and #[span.code endDate] will be removed
            and the start and end of event will be exlusively defined through #[span.code start]
            and #[span.code end]. It will accept both a String and a Javascript Date.#[br]
            Vue Cal will always return the Date object and not the string, even if you defined it
            as a string.
        li.
          The #[span.code event-change] emitted event now returns an object containing the
          #[span.code event] and the #[span.code originalEvent].
        li.
          the #[span.code event-title-change] and #[span.code event-duration-change] events now return an object
          containing the #[span.code event] and the #[span.code oldTitle] or #[span.code oldDate].
        li.
          Vue Cal's #[span.code createEvent()] function now accepts a duration parameter to easily override
          the default 2 hours.
          (ref. #[a(href="#ex--more-advanced-event-creation") More advanced event creation] example)
        li.
          The internal event #[span.code classes] property is replaced with
          #[span.code class] like in the external event definition. This means you can now
          update the #[span.code class] property seemlessly like the initial event definition.
          (From your component methods called from Vue Cal fired events or from #[span.code onEventCreate])

        li
          h4.mt-3.pt-0 Renamed slot
          p The #[span.code event-renderer] slot is renamed into #[span.code event]
        li
          h4.mt-3.pt-0 Huge code refactoring
          p.
            Introducing Vue dependency injections, Utils classes, and a couple of improvements on
            event resize.

      h3.mt-0.mb-2 Other noticeable changes
      ul
        li.
          When creating an event with a given #[span.code endDate], the required
          #[span.code endTimeMinutes] is automatically add.
        li
          h4.mt-3.pt-0 You don't need to call #[span.code alignAllDayBar()] anymore
          p.
            Previously, in some cases you would need to call this function to realign the
            all-day bar with the scrollbar when the scrollbar is fixed (E.g. on Windows).#[br]
            Now the function (renamed to #[span.code alignWithScrollbar]) is triggered automatically
            and in all the cases, once, in mounted.#[br]
            It will now also align the weekdays headings if needed.
        li
          h4.mt-3.pt-0 Renamed CSS classes
          p.
            If you use them in your own CSS (or if you have a custom color theme)
            you might want to update them:#[br]
          strong Cells
          ul
            li #[span.code .current] becomes #[span.code .vuecal__cell--current]
            li #[span.code .today] becomes #[span.code .vuecal__cell--today]
            li #[span.code .out-of-scope] becomes #[span.code .vuecal__cell--out-of-scope]
            li #[span.code .before-min] becomes #[span.code .vuecal__cell--before-min]
            li #[span.code .after-max] becomes #[span.code .vuecal__cell--after-max]
            li #[span.code .disabled] becomes #[span.code .vuecal__cell--disabled]
            li #[span.code .selected] becomes #[span.code .vuecal__cell--selected]
            li #[span.code .vuecal__cell--has-splits] &amp; #[span.code .vuecal__cell--has-events] remain the same
          strong View selector buttons
          ul
            li Added class: #[span.code .vuecal__view-btn]
            li #[span.code .active] becomes #[span.code .vuecal__view-btn--active]

        li
          h4.mt-0 New CSS classes when an event is dragged
          ul
            li Over a cell: #[span.code .vuecal__cell--highlighted]
            li Over a menu arrow (previous &amp; next): #[span.code .vuecal__arrow--highlighted]
            li Over a menu view button: #[span.code .vuecal__view-btn--highlighted]
            li Event dragging class: #[span.code .vuecal__event-dragging]
        li
          h4.mt-0 Updated color theme
          p.
            If you have a custom color theme, these new classes should be added:
            #[span.code .vuecal__view-btn--highlighted],
            #[span.code .vuecal__arrow--highlighted],
            #[span.code .vuecal__cell--highlighted].#[br]
            Refer to the #[a(href="#css-notes") CSS Notes].

  div.grey--text #[strong Version 2.24.4] Fire `event-focus` only once, always return a date from `cell-click`
  div.grey--text #[strong Version 2.24.3] Fix the all-day bar label cell horizontal alignment
  div.grey--text #[strong Version 2.24.1] Disable special hours in the all-day bar
  div #[strong Version 2.24.0] Allow toggling day splits
  div #[strong Version 2.23.0] Added #[span.code special-hours] option
  div.grey--text #[strong Version 2.22.1] Fix the selected cell CSS class not added on selectedDate change.
  div #[strong Version 2.22.0] Added the #[span.code addHours], #[span.code subtractHours], #[span.code addMinutes], #[span.code subtractMinutes] Date prototypes
  div #[strong Version 2.21.0] Align the all-day bar on devices with fixed scrollbar width
  div.grey--text #[strong Version 2.20.1] Fix wrong week number with #[span.code startWeekOnSunday]
  div #[strong Version 2.20.0] Added Icelandic language
  div #[strong Version 2.19.0] Emit an event on #[span.code cell-keypress-enter]
  div #[strong Version 2.18.0] Added a #[span.code cell-contextmenu] option and emitted event
  div #[strong Version 2.17.0] Added Lithuanian language
  div #[strong Version 2.16.0]
    ul
      li New Date prototype functions, refer to: #[a(href="#date-prototypes") Date prototypes]
      li Scroll the view to a particular time: #[a(href="#ex--scroll-to-time") see the example]
      li Fix bug where timeless and all-day events were displaying time
    highlight-message.mb-2(type="warning")
      ul
        li.
          #[strong The big "recurring event" feature is coming soon!]#[br]
          In this release, lots of refactored code is merged back into the master branch
          from the recurring-event branch to support the new feature.
        li
          strong.
            To allow formatting both date and time in the same Date prototype function,
            the formatting keywords have changed, since the month and minutes keywords were
            both #[strong.code.black--text mm] but in 2 different functions.#[br]
            The new formatting keywords are more commonly used, the default format is now #[span.code `YYYY-MM-DD`].#[br]
            Ref. #[a(href="#date-prototypes") Date prototypes]

  div.mt-4 #[strong Version 2.15.0]
    ul
      li Allow ending an event at #[span.code 00:00] both from #[span.code event.end] and #[span.code event.endDate]
      li Prevent resizing an event bellow a 1 minute duration or a minimum height of 5px.
  div.mt-2 #[strong Version 2.14.0] Allow custom weekday render (#[span.code month] &amp; #[span.code week] views)
  div #[strong Version 2.13.0] Added Indonesian language
  div #[strong Version 2.12.0] Added the #[span.code overlapsPerTimeStep] option
  div #[strong Version 2.11.0] Added Greek language
  div #[strong Version 2.10.0] Added the #[span.code watchRealTime] option
  div #[strong Version 2.9.0] Added the #[span.code minEventWidth] option
  div #[strong Version 2.8.0] Added the #[span.code showWeekNumbers] option
  div #[strong Version 2.7.0] Added #[span.code minSplitWidth] option for #[span.code splitDays]
  div #[strong Version 2.6.0] Added Bangla language
  div #[strong Version 2.5.0] Control Previous &amp; Next externally
  div #[strong Version 2.4.0] Added Korean language
  div #[strong Version 2.3.0] Added Turkish language
  div #[strong Version 2.2.0] Allow rejecting event creation through #[span.code on-event-create]
  div #[strong Version 2.1.0] Added clicked split id in #[span.code cell-click], #[span.code cell-dblclick] &amp; #[span.code cell-focus] emitted events
  v-layout.my-12(align-center)
    v-btn.ml-n5.primary--text(rounded text @click="seeOldReleaseNotes = !seeOldReleaseNotes")
      v-icon.mr-2 {{ seeOldReleaseNotes ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}
      strong {{ seeOldReleaseNotes ? 'Hide' : 'See' }} older release notes
    v-divider.primary
  v-slide-y-transition
    div(v-if="seeOldReleaseNotes")
      div #[strong Version 2.0.0]
        highlight-message(type="warning") Due to the new scoped slots syntax, Vue Cal now requires Vue@2.6.0+
        highlight-message(type="success")
          h3.mt-0.pt-0 New features
          ul
            li
              | Added an option to hide particular days of the week
              em.grey--text.ml-1 (ref. #[span.code hideWeekdays] in the #[a(href="#api") API] section)
            li
              | Added new emitted event #[span.code cell-dblclick]
              em.grey--text.ml-1 (ref. #[a(href="#ex--emitted-events") Emitted events] example)
            li
              | Added ability to resize horizontally
              em.grey--text.ml-1 (ref. #[span.code resizeX] in the #[a(href="#api") API] section)
            li
              | Added ability to create events on cell single/double click
              em.grey--text.ml-1 (ref. #[a(href="#ex--more-advanced-event-creation") More advanced event creation] example)
            li
              | Added function to get minutes at cursor (on click of a cell)
              em.grey--text.ml-1 (ref. #[a(href="#ex--emitted-events") Emitted events] example)
            li
              | Now support displaying more than 3 overlapping events!
            li
              | Events start &amp; end can now also be defined with Date objects through #[span.code startDate] &amp; #[span.code endDate]
              em.grey--text.ml-1 (ref. #[span.code events] in the #[a(href="#api") API] section)
            li
              | Added an option to display day splits labels in the header
              em.grey--text.ml-1 (ref. #[span.code stickySplitLabels] in the #[a(href="#api") API] section)
            li
              | Added #[span.code deletable], #[span.code resizable] attributes on events to override globals
              em.grey--text.ml-1 (ref. #[a(href="#ex--edit-delete-create-events") Edit, delete &amp; create events] example)
            li.
              Vue Cal is now more accessible (WAI-ARIA). You can now navigate through the calendar with the keyboard.#[br]
              Select or focus a cell or an event with the #[kbd tab] key.#[br]
              Pressing #[kbd enter] on a cell will go to a narrower view if any, and pressing
              #[kbd enter] on an event will act like a click.

          h3.mt-3 Big changes
          ul
            li New scoped slots syntax #[em.grey--text.ml-1 (internal change - requires Vue 2.6+)]
            li the #[span.code no-event-overlaps] option is now useless and removed
            li.
              Externalize all locales from main library
              #[em.grey--text.ml-1 (ref. #[a(href="#ex--internationalization") Internationalization] example)]#[br]
              Now, only the locale you need will be loaded on demand (as a separate request).#[br]
              This will ensure Vue Cal keeps its file size as light as possible.
            li.
              If you have a custom color theme, you need to edit #[span.code .vuecal__menu li] to
              #[span.code .vuecal__menu button]. #[em.grey--text.ml-1 (ref. #[a(href="#css-notes") CSS Notes])].#[br]
              This is for accessibility purpose.

          h3.mt-3 Other noticeable changes
          ul
            li #[span.code event-duration-change] is now only fired after resizing an event
            li Added a resizing class on events being resized
            li A click on a cell (outside of events) removes the focus state of event
            li Cancel event deletion with escape key
            li Focus a multiple day event highlights all the segments
            li Calculate event segments within current view only (great performance gain on long events)
            li Improve rendering performances on event resizing
            li Improve resizing events logic
            li Week view returned date range (through emitted events) takes #[span.code hideWeekends] in consideration
            li.
              Renamed the option #[span.code dblClickToNavigate] to #[span.code dblclickToNavigate]
              for consistency.
            li.
              Renamed the option #[span.code 12-hour] (invalid HTML attribute) to
              #[span.code twelve-hour] and the corresponding css class to
              #[span.code .vuecal--twelve-hour].
            li Fix bug: allow date selection before the Epoch time!
            li Fix bug: days count calculation when multiple-day event crosses a daylight saving change
            li.
              On month view, out of scope events returned by emitted events don't include
              events that are already in the events array of the current month.
              (may happen with multiple-day events)
            li
              | Internal events structure has changed:
              ul
                li Refactored multiple day events &amp; save 'segments' inside events
                li.
                  #[span.code startDate]/#[span.code endDate] previously containing strings are now Date Objects.#[br]
                  If you want formatted strings, use #[span.code start]/#[span.code end] instead
                li.
                  #[span.code startTime] &amp; #[span.code endTime] are removed as redundant,
                  use #[span.code start]/#[span.code end] or #[span.code startDate]/#[span.code endDate] instead
                li.
                  Due to accessibility, multiple elements of the headers are converted to #[span.code button]#[br]
                li Few nesting levels were removed from html markup by using #[span.code &lt;template&gt;] tags

      div #[strong Version 1.63.0] Added Japanese language
      div #[strong Version 1.62.0] Added Arabic &amp; Farsi languages
      div #[strong Version 1.61.0] Added Traditional Chinese language
      div #[strong Version 1.60.0] Added Danish language
      div #[strong Version 1.59.0] Added Czech language
      div #[strong Version 1.58.0] Added Ukrainian language
      div #[strong Version 1.57.0] Added an option to display a Today button
        highlight-message(type="success").
          The CSS class of the title bar has changed from #[span.code .vuecal__title] to #[span.code .vuecal__title-bar].#[br]
          The class #[span.code .vuecal__title] is now only wrapping the title, inside the #[span.code .vuecal__title-bar].#[br]
        highlight-message(type="tips").
          If you have a custom theme, you will need to update it as per the theme example in the #[a(href="#css-notes") CSS Notes].
      div #[strong Version 1.56.0] Allow #[span.code minCellWidth] independently of #[span.code splitDays]
      div #[strong Version 1.55.0] Set view and cells end dates to 23:59:59
        highlight-message(type="success")
          ul
            li This update ensures the coverage of the full range of days when fetching your events from an AJAX call.
            li.
              The #[span.code day-click] &amp; #[span.code day-focus] emitted events are renamed to
              #[span.code cell-click] &amp; #[span.code cell-focus] as they are also triggered on
              #[span.code years] &amp; #[span.code year] views.
            li Adaptive width on events-count (for count numbers on more than 1 digit)
            li On month view, removed redundant css classes from events (classes related to event overlaps)
      div #[strong Version 1.54.0] Added min &amp; max dates for cell selection
        highlight-message(type="success")
          ul
            li.
              The CSS class #[span.code .splitted] (appearing on the #[span.code .vuecal__cell] element
              when the cell is split) is renamed to #[span.code .vuecal__cell--has-splits].
            li.
              The #[span.code selectedDate] option, like min &amp; max dates, now also accept a
              plain JS Date Object.
      div #[strong Version 1.53.0] Added click/dblclick ability on weekdays headings on week view
      div #[strong Version 1.52.0] Separate #[span.code outOfScopeEvents] &amp; #[span.code events] in month view
        highlight-message(type="success").
          In month view only, the emitted events #[span.code ready] &amp; #[span.code view-change]
          now return an object containing a new #[span.code outOfScopeEvents] array separated from the events array
      div #[strong Version 1.51.0] Added Bosnian &amp; Serbian languages
      div #[strong Version 1.50.0] Create a new event on cell click &amp; hold
      div #[strong Version 1.49.0] Added Hebrew language
      div #[strong Version 1.48.0] Added Bulgarian language
      div #[strong Version 1.47.0] Added events count on #[span.code years] &amp; #[span.code year] views
        highlight-message(type="success").
          As it can now be used on #[span.code years] &amp; #[span.code year] views, the former
          #[span.code events-count-month-view] slot is now renamed to #[span.code events-count].
      div #[strong Version 1.46.0] Allow cell customization
        highlight-message(type="success").
          For consistency, the slots #[span.code arrowPrev] &amp; #[span.code arrowNext]
          are now renamed to #[span.code arrow-prev] &amp; #[span.code arrow-next].

      div #[strong Version 1.45.0] Added #[span.code cell-click] emitted event
      div #[strong Version 1.44.0] Added Slovenian &amp; Hungarian languages
      div #[strong Version 1.43.0] Added Catalan language
      div #[strong Version 1.42.0] Added Norwegian language
      div #[strong Version 1.41.0] Added Romanian language
      div #[strong Version 1.39.0] Added Vietnamese language
      div #[strong Version 1.38.0] #[span.code showAllDayEvents] now also accepts string 'short'
      div #[strong Version 1.37.0] Added text 'All day' in all i18n files
      div #[strong Version 1.36.0] Added out of scope events in month view
        highlight-message(type="success").
          On a month view, the events from the out of scope days
          (cells before and after the current month) are now also be displayed when using
          the #[span.code eventsOnMonthView] option, and returned in the array of events in
          the #[span.code ready] &amp; #[span.code view-change] emited events.
      div #[strong Version 1.35.0] Allow displaying all-day events in fixed top bar
      div #[strong Version 1.34.0] Allow starting week on Sunday
      div
        | #[strong Version 1.33.0] Minor internal structure improvements
        highlight-message(type="success").
          In order to make the internal structure less verbose, the #[span.code events-count] slot
          use has been simplified.#[br]
          Refer to the #[a(href="#ex--events-indicators") Month view with events indicators] example.
          A few default CSS rules have also been updated.#[br]
      div
        | #[strong Version 1.32.0] Allow Syncing 2 vue-cal instances
        highlight-message(type="success").
          The #[span.code selected-date] option now also accepts a native Javascript Date object.#[br]
          Refer to the #[span.code selectedDate] option in the #[a(href="#api") API] section.
      div #[strong Version 1.31.0] Added CSS transitions option
      div #[strong Version 1.30.0] Allow custom event rendering
      div #[strong Version 1.29.0] Accept a callback function on event click / dblclick
      div #[strong Version 1.28.0] Added Polish language
      div
        | #[strong Version 1.27.0] Allow overriding 'No event' text
        highlight-message(type="success").
          The #[span.code events-on-month-view] option now also accepts the string '#[span.code short]'.#[br]
          Refer to the #[a(href="#ex--events-on-month-view") Display events on month view] example.
      div #[strong Version 1.26.0] Emitted events #[span.code ready] &amp; #[span.code view-change] return events
      div #[strong Version 1.25.0] Support multiple day events
      div
        | #[strong Version 1.24.0] Allow hiding the calendar body
        highlight-message(type="success").
          Week days headings now have a today CSS class when equals to today's date.
      div #[strong Version 1.22.0] Added Slovak language
      div #[strong Version 1.21.0] Added Georgian language
      div #[strong Version 1.20.0] Allow displaying events on month view
      div #[strong Version 1.19.0] Emit events on mouse-enter &amp; mouse-leave an event
      div #[strong Version 1.18.0] Allow overriding indicators in month view
      div #[strong Version 1.17.0] Allow overriding time cells &amp; title
      div #[strong Version 1.16.0] Highlight Today's current time
      div #[strong Version 1.15.0] Added German language
      div
        | #[strong Version 1.14.0] Added custom time format &amp; emit event on #[span.code cell-focus]
        highlight-message(type="success")
          ul
            li The emitted #[span.code view-change] event now returns an object with a view name and startDate.
            li The emitted events-related events now also return native JS Date objects.
            li Refer to the #[a(href="#ex--emitted-events") emitted events example].
      div #[strong Version 1.13.0] Added Swedish language
      div #[strong Version 1.12.0] Added Croatian language
      div
        | #[strong Version 1.11.0] Added events indicators in month view
        highlight-message(type="tips").
          If you have created a custom theme, you will need to update it adding the new indicator
          #[span.code .vuecal__cell-events-count], as per the theme example in the #[a(href="#css-notes") CSS Notes].
        highlight-message(type="success").
          The default #[span.code time-step] option value is now 60 minutes (previously 30).
      div #[strong Version 1.10.0] Allow no event overlaps
      div #[strong Version 1.9.0] Added Dutch language
      div #[strong Version 1.8.0] Display up to 3 simultaneous events &amp; redraw overlaps on event resize &amp; delete
      div #[strong Version 1.7.0] Vue Cal emits events
      div #[strong Version 1.6.0] Allow event deletion on touch devices
      div #[strong Version 1.5.0] Added Russian language
      div
        | #[strong Version 1.4.0] Allow editing events title
        highlight-message(type="success")
          ul
            li The delete button now appears on click and hold.
            li All the events are now read-only by default you can add the option #[span.code editableEvents] to allow edition.
            li.
              The #[span.code editableEvents] option triggers all the editing features on and off.#[br]
              Refer to the #[span.code editableEvents] option in the #[a(href="#api") API] section.
      div #[strong Version 1.3.0] Added Simplified Chinese language &amp; bug fixes
      div
        | #[strong Version 1.2.0] Allow event deletion
        highlight-message(type="success").
          You now have the ability to select an event independently of a cell.#[br]
          On event focus the event z-index is increased and a delete button appears to delete the event.#[br]
          Hovering an event also increases its z-index so you can see the event more easily in case of overlaps.
      div.mt-3 #[strong Version 1.1.0] Allow event resizing + Spanish &amp; Portuguese-Brasil languages.
      div.mt-3 #[strong Version 1.0.0] First public release

  v-dialog(v-model="showDialog" max-width="600")
    v-card
      v-card-title.primary.white--text.py-2
        v-icon.mr-3(color="white") {{ selectedEvent.icon }}
        span.headline.text-uppercase {{ selectedEvent.title }}
        v-spacer
        strong {{ selectedEvent.start && selectedEvent.start.format('DD/MM/YYYY') }}
      v-card-text.py-4
        p(v-html="selectedEvent.contentFull")
        strong Event details:
        ul
          li Event starts at: {{ selectedEvent.start && selectedEvent.start.formatTime() }}
          li Event ends at: {{ selectedEvent.end && selectedEvent.end.formatTime() }}

  v-dialog(v-model="showEventCreationDialog" :persistent="true" max-width="420")
    v-card
      v-card-title.pa-2.primary.white--text
        v-text-field.ma-0.pa-0(v-model="selectedEvent.title" placeholder="Event Title" hide-details color="white")
      v-card-text.pa-2
        v-textarea.pa-0(v-model="selectedEvent.content" placeholder="Event Content" rows="3" hide-details)
        v-layout.justify-space-between
          v-select.flex.shrink(
            :items="eventsCssClasses"
            placeholder="Event CSS Class"
            @change="selectedEvent.class = $event"
            :value="selectedEvent.class"
            hide-details
            style="max-width: 170px")
          v-switch.flex.shrink(v-model="selectedEvent.background" label="Background Event" color="primary")
        v-layout.mt-2
          v-spacer
          v-btn.ma-1(small @click="cancelEventCreation()") Cancel
          v-btn.ma-1(small color="primary" @click="closeCreationDialog()") Save
</template>

<script>
import VueCal from '@/components/vue-cal'
import Sshpre from 'simple-syntax-highlighter'
import 'simple-syntax-highlighter/dist/sshpre.css'
import HighlightMessage from '@/components/highlight-message'
import TodoListItem from '@/components/todo-list-item'

const dailyHours = { from: 9 * 60, to: 18 * 60, class: 'business-hours' }

const events = [
  {
    start: '2018-10-30 10:30',
    end: '2018-10-30 11:30',
    title: 'Doctor appointment',
    content: '<i class="v-icon material-icons">local_hospital</i>',
    class: 'health',
    split: 1
  },
  {
    start: '2018-11-16 10:30',
    end: '2018-11-16 11:30',
    title: 'Doctor appointment',
    content: '<i class="v-icon material-icons">local_hospital</i>',
    class: 'health',
    split: 1
  },
  {
    start: '2018-11-19 10:35',
    end: '2018-11-19 11:30',
    title: 'Doctor appointment',
    content: '<i class="v-icon material-icons">local_hospital</i>',
    class: 'health',
    split: 1
  },
  {
    start: '2018-11-19 18:30',
    end: '2018-11-19 19:15',
    title: 'Dentist appointment',
    content: '<i class="v-icon material-icons">local_hospital</i>',
    class: 'health',
    split: 2
  },
  {
    start: '2018-11-20 18:30',
    end: '2018-11-20 20:30',
    title: 'Crossfit',
    content: '<i class="v-icon material-icons">fitness_center</i>',
    class: 'sport',
    split: 2
  },
  {
    start: '2018-11-21 11:00',
    end: '2018-11-21 13:00',
    title: 'Brunch with Jane',
    content: '<i class="v-icon material-icons">local_cafe</i>',
    class: 'leisure',
    split: 1,
    background: false
  },
  {
    start: '2018-11-21 19:30',
    end: '2018-11-21 23:00',
    title: 'Swimming lesson',
    content: '<i class="v-icon material-icons">pool</i>',
    class: 'sport',
    split: 2
  },
  {
    start: '2018-11-23 12:30',
    end: '2018-11-23 13:00',
    title: 'Macca\'s with Mark',
    content: '<i class="v-icon material-icons">fastfood</i>',
    class: 'leisure',
    split: 2
  },
  {
    start: '2018-11-23 21:00',
    end: '2018-11-23 23:30',
    title: 'Movie time',
    content: '<i class="v-icon material-icons">local_play</i>',
    class: 'leisure',
    split: 1
  },
  {
    start: '2018-11-30 21:00',
    end: '2018-11-30 23:30',
    title: 'Another movie tonight',
    content: '<i class="v-icon material-icons">local_play</i>',
    class: 'leisure',
    split: 1
  }
]

export default {
  components: { VueCal, Sshpre, HighlightMessage, TodoListItem },
  data: () => ({
    localesList: [
      { code: 'ar', label: 'Arabic' },
      { code: 'bn', label: 'Bangla' },
      { code: 'bs', label: 'Bosnian' },
      { code: 'bg', label: 'Bulgarian' },
      { code: 'ca', label: 'Catalan' },
      { code: 'cs', label: 'Czech' },
      { code: 'zh-cn', label: 'Chinese (Simplified)' },
      { code: 'zh-hk', label: 'Chinese (Traditional)' },
      { code: 'hr', label: 'Croatian' },
      { code: 'da', label: 'Danish' },
      { code: 'nl', label: 'Dutch' },
      { code: 'en', label: 'English' },
      { code: 'fa', label: 'Farsi' },
      { code: 'fr', label: 'French' },
      { code: 'ka', label: 'Georgian' },
      { code: 'de', label: 'German' },
      { code: 'el', label: 'Greek' },
      { code: 'he', label: 'Hebrew' },
      { code: 'hu', label: 'Hungarian' },
      { code: 'is', label: 'Icelandic' },
      { code: 'it', label: 'Italian' },
      { code: 'id', label: 'Indonesian' },
      { code: 'ja', label: 'Japanese' },
      { code: 'ko', label: 'Korean' },
      { code: 'lt', label: 'Lithuanian' },
      { code: 'no', label: 'Norwegian' },
      { code: 'pl', label: 'Polish' },
      { code: 'pt-br', label: 'Portuguese Brasilian' },
      { code: 'ro', label: 'Romanian' },
      { code: 'ru', label: 'Russian' },
      { code: 'sr', label: 'Serbian' },
      { code: 'sk', label: 'Slovak' },
      { code: 'sl', label: 'Slovenian' },
      { code: 'es', label: 'Spanish' },
      { code: 'sv', label: 'Swedish' },
      { code: 'tr', label: 'Turkish' },
      { code: 'uk', label: 'Ukrainian' },
      { code: 'vi', label: 'Vietnamese' }
    ],
    locale: 'zh-cn',
    seeOldReleaseNotes: false,
    splitsExample: {
      minCellWidth: 400,
      minSplitWidth: 0,
      stickySplitLabels: false,
      splitDays: [
        { id: 1, class: 'mom', label: 'Mom' },
        { id: 2, class: 'dad', label: 'Dad', hide: false },
        { id: 3, class: 'kid1', label: 'Kid 1' },
        { id: 4, class: 'kid2', label: 'Kid 2' },
        { id: 5, class: 'kid3', label: 'Kid 3' }
      ]
    },
    example1theme: 'green',
    minEventWidth: 0,
    timeCellHeight: 26,
    indicatorStyle: 'count',
    now: new Date(),
    logs: [],
    showDialog: false,
    showEventCreationDialog: false,
    showAllDayEvents: 0,
    shortEventsOnMonthView: false,
    events,
    selectedEvent: {},
    eventsCssClasses: ['leisure', 'sport', 'health'],
    selectedDate: null,
    activeView: 'week',
    logMouseEvents: false,
    editableEvents: [
      ...events.map(e => ({ ...e })), // Clone events when reusing, so events are independent.
      {
        start: '2018-11-20 14:00',
        end: '2018-11-20 17:30',
        title: 'Boring event',
        content: '<i class="v-icon material-icons">block</i><br>I am not draggable, not resizable and not deletable.',
        class: 'blue-event',
        deletable: false,
        resizable: false,
        draggable: false
      }
    ],
    overlappingEvents: [
      ...events.map(e => ({ ...e })), // Clone events when reusing, so events are independent.
      {
        start: '2018-11-21 14:00',
        end: '2018-11-21 22:00',
        title: 'A big thing',
        content: '<i class="v-icon material-icons">sentiment_satisfied_alt</i>',
        class: 'health'
      },
      {
        start: '2018-11-21 16:00',
        end: '2018-11-21 19:00',
        title: 'Another thing',
        content: '<i class="v-icon material-icons">thumb_up</i>',
        class: 'blue-event'
      },
      {
        start: '2018-11-23 21:00',
        end: '2018-11-23 23:30',
        title: 'Eat pop corns',
        content: '<i class="v-icon material-icons">local_play</i>',
        class: 'leisure'
      },
      {
        start: '2018-11-23 21:00',
        end: '2018-11-23 23:30',
        title: 'Enjoy the movie',
        content: '<i class="v-icon material-icons">local_play</i>',
        class: 'leisure'
      }
    ],
    eventsCopy: [
      ...events.map(e => ({ ...e })), // Clone events when reusing, so events are independent.
      {
        start: '2018-11-21 12:00',
        end: '2018-11-21 12:30',
        title: 'Recall Dave',
        content: '<i class="v-icon material-icons">local_cafe</i>',
        class: 'leisure'
      },
      {
        start: '2018-11-23 21:00',
        end: '2018-11-23 23:30',
        title: 'Eat pop corns',
        content: '<i class="v-icon material-icons">local_play</i>',
        class: 'leisure'
      },
      {
        start: '2018-11-23 21:00',
        end: '2018-11-23 23:30',
        title: 'Enjoy the movie',
        content: '<i class="v-icon material-icons">local_play</i>',
        class: 'leisure'
      }
    ],
    eventsCopy2: [
      ...events.map(e => ({ ...e })) // Clone when reusing, so events are independent.
    ],
    eventsCopy3: [
      ...events.map(e => ({ ...e })) // Clone when reusing, so events are independent.
    ],
    multipleDayEvents: [
      {
        start: '2018-11-16 10:00',
        end: '2018-11-20 12:37',
        title: 'Running Marathon',
        content: '<i class="v-icon material-icons">directions_run</i>',
        class: 'sport'
      },
      {
        start: '2018-11-20 10:00',
        end: '2018-11-20 10:25',
        title: 'Drink water!',
        content: '<i class="v-icon material-icons">local_drink</i>',
        class: 'health drink-water'
      },
      {
        start: '2018-11-21 19:00',
        end: '2018-11-23 11:30',
        title: 'Trip to India',
        content: '<i class="v-icon material-icons">flight</i>',
        class: 'leisure'
      }
    ],
    recurringEvents: [],
    allDayEvents: [
      {
        start: '2019-02-12',
        end: '2019-02-12',
        title: 'Day off!',
        content: '<i class="v-icon material-icons">beach_access</i>',
        class: 'yellow-event',
        allDay: true
      },
      {
        start: '2019-02-14',
        end: '2019-02-14',
        title: 'Valentine\'s day',
        content: '<i class="v-icon material-icons">favorite_outline</i>',
        class: 'pink-event',
        allDay: true
      },
      {
        start: '2019-02-14',
        end: '2019-02-14',
        title: 'Need to go shopping',
        content: '<i class="v-icon material-icons">shopping_cart</i>',
        class: 'leisure',
        allDay: true
      },
      {
        start: '2019-02-11 10:35',
        end: '2019-02-11 11:30',
        title: 'Doctor appointment',
        content: '<i class="v-icon material-icons">local_hospital</i>',
        class: 'health',
        split: 1
      },
      {
        start: '2019-02-11 18:30',
        end: '2019-02-11 19:15',
        title: 'Dentist appointment',
        content: '<i class="v-icon material-icons">local_hospital</i>',
        class: 'health',
        split: 2
      },
      {
        start: '2019-02-12 18:30',
        end: '2019-02-12 20:30',
        title: 'Crossfit',
        content: '<i class="v-icon material-icons">fitness_center</i>',
        class: 'sport',
        split: 1
      },
      {
        start: '2019-02-13 11:00',
        end: '2019-02-13 13:00',
        title: 'Brunch with Jane',
        content: '<i class="v-icon material-icons">local_cafe</i>',
        class: 'leisure',
        split: 1
      },
      {
        start: '2019-02-13 19:30',
        end: '2019-02-13 23:00',
        title: 'Swimming lesson',
        content: '<i class="v-icon material-icons">pool</i>',
        class: 'sport',
        split: 2
      },
      {
        start: '2019-02-15 12:30',
        end: '2019-02-15 13:00',
        title: 'Macca\'s with Mark',
        content: '<i class="v-icon material-icons">fastfood</i>',
        class: 'leisure',
        split: 2
      },
      {
        start: '2019-02-15 21:00',
        end: '2019-02-15 23:30',
        title: 'Movie time',
        content: '<i class="v-icon material-icons">local_play</i>',
        class: 'leisure',
        split: 1
      }
    ],
    splitEvents: [
      ...events.map(e => ({ ...e })), // Clone events when reusing, so events are independent.
      {
        start: '2018-11-21 12:00',
        end: '2018-11-21 12:30',
        title: 'Recall Dave',
        content: '<i class="v-icon material-icons">local_cafe</i>',
        class: 'leisure',
        split: 1
      },
      {
        start: '2018-11-21 20:00',
        end: '2018-11-21 22:00',
        title: 'Salsa',
        content: '<i class="v-icon material-icons">directions_walk</i>',
        class: 'sport',
        split: 1
      },
      {
        start: '2018-11-23 21:00',
        end: '2018-11-23 23:30',
        title: 'Movie time',
        content: '<i class="v-icon material-icons">local_play</i>',
        class: 'leisure',
        split: 2
      }
    ],
    backgroundEvents: [
      ...events.map(e => ({ ...e })), // Clone events when reusing, so events are independent.
      {
        start: '2018-11-19 12:00',
        end: '2018-11-19 14:00',
        title: 'LUNCH',
        class: 'lunch',
        background: true
      },
      {
        start: '2018-11-20 12:00',
        end: '2018-11-20 14:00',
        title: 'LUNCH',
        class: 'lunch',
        background: true
      },
      {
        start: '2018-11-21 12:00',
        end: '2018-11-21 14:00',
        title: 'LUNCH',
        class: 'lunch',
        background: true
      },
      {
        start: '2018-11-22 12:00',
        end: '2018-11-22 14:00',
        title: 'LUNCH',
        class: 'lunch',
        background: true
      },
      {
        start: '2018-11-23 12:00',
        end: '2018-11-23 14:00',
        title: 'LUNCH',
        class: 'lunch',
        background: true
      }
    ],
    timelessEvents: [
      {
        start: '2018-11-21',
        end: '2018-11-21',
        title: 'Need to go shopping',
        content: '<i class="v-icon material-icons">shopping_cart</i>',
        class: 'leisure'
      },
      {
        start: '2018-11-21',
        end: '2018-11-21',
        title: 'Golf with John',
        content: '<i class="v-icon material-icons">golf_course</i>',
        class: 'sport'
      },
      {
        start: '2018-11-22',
        end: '2018-11-22',
        title: 'Dad\'s birthday!',
        content: '<i class="v-icon material-icons">cake</i>',
        class: 'sport'
      },
      {
        start: '2018-11-23',
        end: '2018-11-23',
        title: 'Black Friday',
        content: '<i class="v-icon material-icons">shopping_cart</i>',
        class: 'leisure'
      }
    ],
    eventsToDrag: [
      {
        start: '2018-11-21 14:00',
        end: '2018-11-21 16:30',
        title: 'Surgery',
        content: '<i class="v-icon material-icons">restaurant</i>',
        class: 'health',
        split: 2
      }
    ],
    eventsToPop: [
      {
        start: '2018-11-20 14:00',
        end: '2018-11-20 18:00',
        title: 'Need to go shopping',
        icon: 'shopping_cart',
        content: 'Click to see my shopping list',
        contentFull: 'My shopping list is rather long:<br><ul><li>Avocados</li><li>Tomatoes</li><li>Potatoes</li><li>Mangoes</li></ul>',
        class: 'leisure'
      },
      {
        start: '2018-11-22 10:00',
        end: '2018-11-22 15:00',
        title: 'Golf with John',
        icon: 'golf_course',
        content: 'Do I need to tell how many holes?',
        contentFull: 'Okay.<br>It will be a 18 hole golf course.',
        class: 'sport'
      }
    ],
    draggables: [
      {
        id: 1,
        title: 'Ext. Event 1',
        content: 'content 1',
        duration: 60
      },
      {
        id: 2,
        title: 'Ext. Event 2',
        content: 'content 2',
        duration: 30
      },
      {
        id: 3,
        title: 'Ext. Event 3',
        content: 'content 3'
      }
    ],
    deleteEventFunction: null
  }),

  methods: {
    logEvents (emittedEventName, params) {
      if (!this.logMouseEvents && emittedEventName.includes('event-mouse')) return

      this.logs.push({ name: emittedEventName, args: JSON.stringify(params) })
    },
    clearEventsLog () {
      this.logs = []
    },
    customEventsCount: events => events ? events.filter(e => e.class === 'leisure').length : 0,
    scrollToCurrentTime (vuecal) {
      const calendar = document.querySelector(`${vuecal} .vuecal__bg`)
      const hours = this.now.getHours() + this.now.getMinutes() / 60
      calendar.scrollTo({ top: hours * this.timeCellHeight, behavior: 'smooth' })
    },
    scrollToTop (vuecal) {
      const calendar = document.querySelector(`${vuecal} .vuecal__bg`)
      calendar.scrollTo({ top: 0, behavior: 'smooth' })
    },
    onEventClick (event, e) {
      this.selectedEvent = event
      this.showDialog = true
      e.stopPropagation()
    },
    cancelEventCreation () {
      this.closeCreationDialog()
      this.deleteEventFunction()
    },
    closeCreationDialog () {
      this.showEventCreationDialog = false
      this.selectedEvent = {}
    },
    onEventCreate (event, deleteEventFunction) {
      this.selectedEvent = event
      this.showEventCreationDialog = true
      this.deleteEventFunction = deleteEventFunction

      return event
    },
    customEventCreation () {
      const dateTime = prompt('Create event on (YYYY-MM-DD HH:mm)', '2018-11-20 13:15')
      if (/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}$/.test(dateTime)) {
        this.$refs.vuecal.createEvent(dateTime, 120, { title: 'New Event', content: 'yay! 🎉', class: 'blue-event' })
      }
      else if (dateTime) alert('Wrong date format.')
    },
    overrideDateTexts () {
      // In Vue Cal documentation Chinese texts are loaded last.
      // Override Date texts with english for prototype formatting functions.
      setTimeout(this.$refs.vuecal.updateDateTexts, 3000)
    },
    onEventDragStart (e, draggable) {
      e.dataTransfer.setData('event', JSON.stringify(draggable))
      e.dataTransfer.setData('cursor-grab-at', e.offsetY)
    },
    onEventDrop ({ event, originalEvent, external }) {
      if (external) {
        const extEventToDeletePos = this.draggables.findIndex(item => item.id === originalEvent.id)
        if (extEventToDeletePos > -1) this.draggables.splice(extEventToDeletePos, 1)
      }
    }
  },

  computed: {
    reversedLogs () {
      return this.logs.slice(0).reverse()
    },
    nowFormatted () {
      return Date.prototype.format && (new Date()).format('YYYY{MM}DD')
    },
    currentDateFormatted () {
      return `${this.now.format()} ${this.now.formatTime()}`
    },
    minDate () {
      return new Date().subtractDays(10)
    },
    maxDate () {
      return new Date().addDays(10)
    },
    specialHours: () => Array(5).fill('').reduce((obj, item, i) => (obj[i + 1] = dailyHours) && obj, {})
  },

  created () {
    if (!HTMLElement.prototype.scrollTo) HTMLElement.prototype.scrollTo = function ({ top }) { this.scrollTop = top }
  }
}
</script>

<style lang="scss">
$primary: #42b983;

.scrollable {
  height: 250px;
  overflow-y: scroll;
  padding-right: 1.8em;
}

.documentation {
  h2:not(.todo) {
    font-size: 27px !important;
    border-bottom: 1px solid #eee;
    margin-bottom: 30px;
    padding-bottom: 8px;
  }

  h3 {
    margin-top: 80px;
    padding: 10px 0 0;
  }

  h3 a {
    font-size: 26px;
    font-weight: normal;
    color: #888 !important;

    .v-icon {vertical-align: middle;}
  }

  h4 {margin: 70px 0 8px;}
  h3 + h4 {margin-top: 20px;}
  h4 a {color: inherit !important;}
  h5 {font-size: 1.1em;color: #555;margin-top: 0.5em;}

  .todo .v-chip__content {padding: 0 3px;}

  .api-options {list-style-type: none;}
  .api-options > li {margin-top: 2em;}
  .api-options p {margin-left: 1.5em;margin-top: 0.5em;}

  .code {font-family: monospace, sans-serif;}
  span.code {color: black;}
}

// Yellow theme.
.vuecal--yellow-theme {
  .vuecal__menu, .vuecal__cell-events-count {background-color: rgba(255, 179, 0, 0.8);color: #fff;}
  .vuecal__title-bar {background-color: rgba(255, 236, 202, 0.5);}
  .vuecal__cell--today, .vuecal__cell--current {background-color: rgba(240, 240, 255, 0.4);}
  &:not(.vuecal--day-view) .vuecal__cell--selected {background-color: rgba(255, 236, 202, 0.4);}
  .vuecal__cell--selected:before {border-color: rgba(235, 216, 182, 0.5);}
}

// Examples.
// =====================================================
.vuecal__event--dragging {
  background-color: rgba(grey, 0.3) !important;
  border: none !important;
}

.vuecal__event-title {font-weight: bold;}

.ex--min-max-dates {
  .vuecal__cell--disabled {text-decoration: line-through;}
  .vuecal__cell--before-min {color: #b6d6c7;}
  .vuecal__cell--after-max {color: #008b8b;}
}

.ex--special-hours {
  .business-hours {
    background-color: rgba(255, 255, 0, 0.2);
    border: solid rgba(255, 210, 0, 0.6);
    border-width: 2px 0;
  }
}

// Custom vue-cal title & "no event" text example.
.ex--custom-title-and-cells {
  .vuecal__cell-events-count {margin-top: -2px;}

  .vuecal__cell .clickable {display: block;}

  .vuecal__cell .clickable.month {
    position: absolute;
    top: 0;
    right: 0;
    color: $primary;
    font-size: 1.2em;
    padding: 0 4px;
    text-decoration: underline;
    display: inline-block;
  }

  .vuecal__cell .vuecal__cell-content {height: 100%;}

  .vuecal__no-event {padding-top: 3em;}
}

// External events drag and drop example.
.external-events-drag-and-drop {
  flex-basis: 0 !important;
  min-width: 285px;
}
.external-events-drag-and-drop .vuecal__event, .external-event {
  background-color: rgba(160, 220, 255, 0.5);
  border: 1px solid rgba(0, 100, 150, 0.15);
  padding: 0.2em 0.4em;
  cursor: move;
  cursor: grab;
}

.external-event {
  margin-bottom: 0.5em;
  width: 12.5em;

  span {color: #777;font-size: 0.9em;}
}

// Today-current-time example.
.ex--today-current-time {
  .vuecal__now-line {color: #06c;}
}

// Events on month view example.
.event-indicator--dash .vuecal__cell-events-count {
  width: 18px;
  height: 2px;
  color: transparent;
}

.event-indicator--dot .vuecal__cell-events-count {
  width: 4px;
  min-width: 0;
  height: 4px;
  padding: 0;
  color: transparent;
}

.ex--events-indicators {
  .vuecal__cell-events-count span {
    background: $primary;
    height: 100%;
    border-radius: 12px;
    display: block;
  }
}

.ex--custom-events-count {
  .vuecal__cell-events-count span {
    background-color: #fd9c42;
    height: 100%;
    min-width: 12px;
    padding: 0 3px;
    border-radius: 12px;
    display: block;
  }
  .vuecal__cell-events-count {background: transparent;}
}

.ex--events-on-month-view.vuecal--month-view {
  .vuecal__cell {height: 80px;}

  .vuecal__cell-content {
    justify-content: flex-start;
    height: 100%;
    align-items: flex-end;
  }

  .vuecal__cell-date {padding: 3px 4px;}
}

.event-indicator--cell .vuecal__cell--has-events {background-color: #fffacd;}
.event-indicator--cell .vuecal__cell-events-count {display: none;}

.vuecal--month-view .vuecal__no-event {display: none;}

// Today button example.
.ex--adding-a-today-button {
  .today-button {
    // font-size: 0.7em;
    min-width: 0;
    height: auto;
    padding: 1px 8px;
  }
  .v-btn--floating.v-btn--small {width: 26px;height: 26px;background-color: transparent !important;}
}

// Split days example.
.vuecal__cell-split.dad {background-color: rgba(221, 238, 255, 0.5);}
.vuecal__cell-split.mom {background-color: rgba(255, 232, 251, 0.5);}
.vuecal__cell-split.kid1 {background-color: rgba(221, 255, 239, 0.5);}
.vuecal__cell-split.kid2 {background-color: rgba(255, 250, 196, 0.5);}
.vuecal__cell-split.kid3 {background-color: rgba(255, 206, 178, 0.5);}
.vuecal__cell-split .split-label {color: rgba(0, 0, 0, 0.1);font-size: 26px;font-weight: 500;}

.vuecal__event.leisure {background-color: rgba(253, 156, 66, 0.85);border: 1px solid rgb(233, 136, 46);color: #fff;}
.vuecal__event.health {background-color: rgba(164, 230, 210, 0.9);border: 1px solid rgb(144, 210, 190);}
.vuecal__event.sport {background-color: rgba(255, 102, 102, 0.85);border: 1px solid rgb(235, 82, 82);color: #fff;}
.vuecal__event.pink-event {background-color: rgba(255, 58, 143, 0.7);border: 1px solid rgb(235, 38, 123);color: #fff;}
.vuecal__event.blue-event {background-color: rgba(100, 200, 255, 0.8);border: 1px solid rgb(80, 180, 235);color: #fff;}
.vuecal__event.yellow-event {background-color: rgba(255, 200, 90, 0.75);border: 1px solid #ffc356;}

.vuecal__event.lunch {
  background: repeating-linear-gradient(45deg, transparent, transparent 10px, #f2f2f2 10px, #f2f2f2 20px);
  color: #999;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vuecal__event.lunch .vuecal__event-time {display: none;align-items: center;}

.vuecal__time-cell .hours.line:before {border-color: $primary;}

.ex--multiple-day-events .vuecal__event {
  border-radius: 5px;

  &.sport {
    background-color: rgba(255, 185, 185, 0.8);
    border: none;
    border-left: 3px solid rgba(230, 55, 55, 0.3);
    color: #c55656;
  }
  &.leisure {
    background-color: rgba(255, 202, 154, 0.8);
    border: none;
    border-left: 3px solid rgba(250, 118, 36, 0.3);
    color: #b57335;
  }
  &.health {
    background-color: rgba(200, 248, 233, 0.8);
    border: none;
    border-left: 3px solid rgba(99, 186, 139, 0.4);
    color: #219671;
  }

  &.event-start {border-radius: 5px 5px 0 0;}
  &.event-middle {border-radius: 0;}
  &.event-end {border-radius: 0 0 5px 5px;}
  &.drink-water {font-size: 0.85em;line-height: 1;padding-top: 0.2em;}
}

.ex--open-dialog-on-event-click {
  .vuecal__event {cursor: pointer;}

  .vuecal__event-title {
    font-size: 1.2em;
    font-weight: bold;
    margin: 4px 0 8px;
  }

  .vuecal__event-time {
    display: inline-block;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  }

  .vuecal__event-content {
    font-style: italic;
  }
}

.ex--all-day-events {
  .vuecal__cell-content {
    justify-content: flex-start;
  }

  .vuecal__cell-date {
    text-align: right;
    padding: 4px;
  }

  &.vuecal--week-view .vuecal__bg .vuecal__event--all-day.pink-event,
  &.vuecal--day-view .vuecal__bg .vuecal__event--all-day.pink-event {right: 50%;}
  &.vuecal--week-view .vuecal__bg .vuecal__event--all-day.leisure,
  &.vuecal--day-view .vuecal__bg .vuecal__event--all-day.leisure {left: 50%;}
}
</style>
